Vue項目小功能：過度~transition

Vue 提供了 transition 的封裝組件，來處理過渡以及動畫

使用過渡或動畫的場景

• 在下列情形中，可以給任何元素和組件添加進入/離開過渡條
• 件渲染(使用v-if)
• 條件展示(使用v-show)
• 動態組件
• 組件的根節點

div:

<div id="app">
  <button @click="isShow = !isShow">顯示隱藏</button>
  <transition name="hello">
    <h1 v-show="isShow" class="come">我是vue過度動畫</h1>
  </transition>
</div>

樣式：

   h1 {
          background: #f38787;
          text-align: center;
          color: white;
      }
      .hello-enter-active {
          animation: atguigu 1s linear;
      }
      .hello-leave-active {
          animation: atguigu 1s linear reverse;
      }
      @keyframes atguigu {
          from {
              transform: translateX(-100%);
          }
          to {
              transform: translateX(0px);
          }
      }

Vue實例:

    var vue = new Vue({
        el: '#app',
        data: {
            msg: '我是vue123',
            isShow: true
        },
        methods: {
            test() {
                console.log('111')
            }
        }
    })

2，過度屬性

查看代碼

 <style>
    div{
        font-size:30px;
        font-weight: bold;
    }
    .v-enter{
        color:red;
    }
    .v-enter-to{
        color:blue;
    }
    .v-enter-active{
        transition:all 5s;
    }
    .v-leave{
        color: blue;
    }
    .v-leave-to{
        color: purple;
    }
    .v-leave-active{
        transition:all 3s;
    }
</style>

<div id="app">
    <!-- 按鈕,點擊切換元素的顯示和隱藏 -->
    <button @click="isShow = !isShow">點擊切換</button>

    <!-- 顯示元素 -->
    <transition>
        <div v-if="isShow">需要動畫的元素</div>
    </transition>

</div>

<script>

    //  實例
    const vm = new Vue({
        el:"#app",
        data:{
            isShow:true
        }
    })
</script>