Vue中CSS动画原理

    

        
hello world
        切换
    

    

这个代码的网页显示如下：

图片.png

点击切换按钮后，显示如下：

图片.png

这都很正常，都是之前学过的内容。
现在有个需求：当点击“切换”后，hello world的显示和隐藏呈现出渐变式的变化。

如果要有渐变式的动画效果，必须要加transition标签。可以给标签起名字，比如叫“fade”。
当元素被transition标签包裹后，Vue会自动分析出元素的动画央视和动画流程。

图片.png

上图是整个动画的流程。当在动画即将开始的时候，Vue会在标签div上增加两个class：“fade-enter”、“fade-enter-active”，当动画第一帧执行结束后，transition会分析出这个是一个动画组，Vue会在动画运行到第二帧的时候，做两件事：1、将之前添加的“fade-enter”给去除；2、再增加一个class：“fade-enter-to”。等动画运行到最后的时候，Vue会将“fade-enter-active”和“fade-enter-to”都给去除。
修改后的代码如下：

    
    
    
    


    

        
            
hello world
        
        切换
    

    

因为涉及到样式，所以head标签的内容也涉及进来。
可以看到在head标签内，增加了style标签，标签内备上了“.fade-enter”，“.fade-enter-active”内容。
opacity是不透明度的意思，其默认值是1；
当动画开始执行的时候，到第一帧时，Vue将这两个class都添加到标签transition内的div标签中；等到第二帧的时候‘fade-enter’开始销毁，这时，opacity将由指定的0变成默认值1,但这个过程并不是一下就完成的，因为我指定了完成所需要的时间，也就是“fade-enter-active”中的3s。这样就完成了整个出现的过程。
这是从隐藏状态变为显示状态，那么同理也会有从显示状态变成隐藏状态

图片.png

上图是整个变成隐藏状态的执行过程。

   
   
   
   


   

       
           
hello world
       
       切换
   

   

现增加的是从显示到隐藏的状态，那么我就要知道隐藏的状态的不透明度是多少，也要知道从显示到隐藏状态用的时间，这就是增加了两个class：“fade-leave-to”、“fade-leave-active”的原因。
因为不透明度都是0，渐变的时间都是3s，当然也可以给style标签做一个整理：

这里面，style标签内都是以fade开头的，这是因为transition标签，我起的名字就是fade；如果transition不起名字的话，那么style标签内将是以v开头，比如v-enter，v-enter-active。
例子中内容的现实与否是用v-if，当然也可以用v-show，动画效果一样。
这种动画效果，Vue把它叫做CSS动画效果，也把它叫做过渡的动画效果