Vue学习整理(三)

Vue 中的动画

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

    <style>
        .fade-enter,
        .fade-leave-to{
            opacity: 0;
        }
        .fade-enter-active,
        .fade-leave-to{
            transition:opacity 3s;
        }
    </style>
    <div id="app">
        <transition name="fade">
             <div v-if="show">Hello World</div>
        </transition>
        <button @click="onClick">切换</button>
    </div>
    <script>
        new Vue({
            el:"#app",
            data:{
                show:"true"
            },
            methods:{
                onClick:function () {
                    this.show=!this.show
                }
            }
        })
    </script>

解释：

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/