vue中动画的定义及使用

代码块

<style>
        /* 2、自定义两组样式，来控制动画。 */
        /* v-enter，v-leave-to，一个是进入的开始，一个是离开的结束 */
        
        .v-enter,
        .v-leave-to {
            opacity: 0;
            /* 位移x轴80px的位置 */
            transform: translateX(80px);
        }
        /* v-enter-active，v-leave-active，一个是进入的时间段，一个是离开的时间段 */
        
        .v-enter-active,
        .v-leave-active {
            /* transition所有属性 用0.4s 状态ease */
            transition: all 0.4s ease;
        }
        /* 自定义前缀my */
        
        .my-enter,
        .my-leave-to {
            opacity: 0;
            /* 位移x轴80px的位置 */
            transform: translatey(80px);
        }
        /* v-enter-active，v-leave-active，一个是进入的时间段，一个是离开的时间段 */
        
        .my-enter-active,
        .my-leave-active {
            /* transition所有属性 用0.4s 状态ease */
            transition: all 0.4s ease;
        }
</style>

<div id="app">
        <input type="button" value="点我" @click="flag=!flag">
        <!-- 1、动画使用第一步，用transition将需要动画的元素包裹起来 -->
        <transition>
            <h3 v-if="flag">你好呀</h3>
        </transition>
        <hr>
        <!-- 自定义动画前缀 一般默认为v 在transition加入name属性定义前缀-->
        <transition name="my">
            <h3 v-if="flag">你好呀</h3>
        </transition>
</div>

总结
1、使用标签将需要动画的元素包裹起来
2、在style中定义动画，成对出现，一个为状态，一个为时间段
3、一般前缀默认为v通过在transition中的name自定义前缀
扩展
1、如果需要动画的元素是经过循环得到的，不能使用transition包起来，而要用transitionGroup 。
2、transition中有几个属性，appear是实现入场渐渐飘的属性，tag=""是定义标签显示为什么标签样式，默认是span标签