Vue中的动画特效

1.CSS动画原理

动画进入：  动画如果不给名字，默认：v-enter

原理：在某一时刻给 div 添加 或 删除一些样式

<style>
    .fade-enter{
        opacity:0;
    }
    .fade-enter-active{
        transition: opacity 1s; //对opacity有一个监控，如果有变化则让opacity在3s中从0变到一个opacity的值。
    }
}
</style>
<div id='root'>
    <transition name='fade'>  <!--如果不给name，动画默认名字v-enter -->
        <div v-show='show'>hello world</div>
    </transition>
</div>
<!--
动画原理说明：当动画开没执行的一瞬间，vue会帮我们在div标签上加fade-enter 和 fade-enter-active 样式，
fade-enter-active的执行周期：动画还没开始，准备开始执行第一帧时就存在了，到动画结束时才被移除
当执行到第二帧的时候，fade-enter 被删除，同时 fade-enter-active 中的opacity 检测到变化，就在1s 中变化opacity的值
-->

View Code