Vue过渡

过渡

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暂时没弄。