Vue中的CSS动画原理(一)

    这里以Vue中的transition过渡动画为例介绍Vue中的CSS动画原理。效果如图1所示，通过toggle按钮实现一个div元素的过渡显示与消失。

图1 一个div元素的toggle效果

（1）使用方式。

图2  动画涉及的dom与 js

    首先在需要加上动画效果的dom元素外加上transition标签，并依据动画效果设置合适的name。然后根据Vue中transition的过程原理，设置几个状态的css样式。

图3  相应状态的css设置

（2）Vue中transition过渡动画的原理

     当一个dom元素被包裹在transition标签中，vue会自动分析元素的css样式，构建如图4所示的动画流程，不同阶段有不同的状态。在动画即将开始时，会往相应dom元素上增加两个class（即 fade-enter 和 fade-enter-active ）；当动画执行完第一帧，进行到第二帧的时候，会去掉 fade-enter，并增加 fade-enter-to；当动画执行到最后，会将 fade-enter-active 和 fade-enter-to 都移除。

图4 transition的enter过程

    fade-enter{ opacity: 0} 代表动画初始时，相应dom元素的 opacity 的值为0. fade-enter-active贯穿动画全过程，而样式 .fade-enter-active{ transition: opacity 2s; }的意思是对 opacity进行监控，如果其改变，则在 2s 内过渡完成 opacity从 0 到 1。

    （I）当动画开始执行时，fade-enter 和 fade-enter-active 都存在，此时opacity为0，dom 透明度为0处于隐藏状态。         (II) 执行完第一帧，fade-enter被移除，opacity也就改变，恢复为原始的1. 而监控 opacity 的 fade-enter-active 监听到这个变化，即会在 2s 内完成 opacity 从0到 1 的渐进变化，从而实现过渡动画的效果。

    至于leave，同理。

图5 transition的 leave 过程

diary: it rains all day in Wuhan recently, and it's cold and damp. Nobody likes the weather.