Vue学习整理(三)

Vue 中的动画

需求：屏幕上有Hello World 文字，还有一个切换按钮，点击切换按钮，文字渐渐消失，再次点击按钮，文字渐渐出现。
transition标签，当一个元素被该标签包裹后，vue会分析CSS样式，自动构建动画流程。

    
    

        
             
Hello World
        
        切换
    
    

解释：

1. 如果transition标签没有name，默认是v
2. 动画显示 v-if=true
   
   image.png
   1. 在动画即将被执行的瞬间，vue会向他包裹的标签中添加两个class名字fade-enter和fade-enter-active
   2. 当动画第一帧执行结束之后，vue会在动画运行第二帧之前，去掉fade-enter并添加fade-enter-to
   3. 当动画结束的时候，vue会将fade-enter-active和fade-enter-to去掉。
3. 动画隐藏 v-if=false
   
   image.png
   1. 在动画即将被执行的瞬间，vue会向他包裹的标签中添加两个class名字fade-leave和fade-leave-active
   2. 当动画第一帧执行结束之后，vue会在动画运行第二帧之前，去掉fade-leave并添加fade-leave-to
   3. 当动画结束的时候，vue会将fade-leave-active和fade-leave-to去掉。

Vue 使用animate.css库

官网：https://daneden.github.io/animate.css/