過渡

Vue 提供了transition的封裝元件，在下列情形中，可以給任何元素和元件新增進入/離開過渡

• 條件渲染 (使用v-if)
• 條件展示 (使用v-show)
• 動態元件
• 元件根節點

自定義過渡的類名

我們可以通過以下 attribute 來自定義過渡類名：

• enter-class
• enter-active-class
• enter-to-class(2.1.8+)
• leave-class
• leave-active-class
• leave-to-class(2.1.8+)

<transition
    name="custom-classes-transition"
    enter
 
-active-class="animated tada"
    leave-active-class="animated bounceOutRight"
  >

程式碼演示：

.guodu-enter, .guodu-leave-to {
            opacity: 0;
            transform: scale(2);
        }
        .guodu-enter-active, .guodu-leave-active {
            transition:all .5s;
            
        }
        .a{
            margin:0 auto;
            width: 300px;
            height: 300px;
            background-color: aqua;
        }
 

<transition name="guodu">
            <div v-if="flag" class="a">
               
            </div>
        </transition>
        <button @click="flag=!flag">按鈕</button>

 data: {
            flag:true
        },

效果展示：

gif暫時沒弄。