vue中的过渡动画

vue在插入,更新或者移出DOM时, 提供多种不同方式的应用过渡效果。

本质上是使用CSS3动画：transition，animation 去实现的过渡动画效果。

vue过渡动画 共计 提供了6类名  ，其中包括4状态点  ，2过程。

进入动画的3类v-enterv-enter-activev-enter-to

离开动画的3个类

v-leavev-leave-activev-leave-to

1.1.1 基本用法

使用transition组件，将要 执行动画的元素 包含在该组件内。 

我们希望 执行动画的元素， 进入动画过程中，离开的过程中我们希望渲染元素的透明度  发生变化

 <div id="app">
        <transition>
            <p v-if="isShow">
                <img v-bind:src="pic" alt="">
            </p>
        </transition>
       
        <button @click="change">点击</button>
 </div>

 /* 第一次点击 透明度由1变成0 ，时长5s*/
    /* 第二次点击 透明度由0变成1 ，时长5s */
    .v-enter-active,.v-leave-active{
        transition: opacity 5s;
    }

    .v-enter,.v-leave-to{
        opacity:0
    }

<script src="./js/vue.js"></script>
    <script>
        var vm=new Vue({
            //模板选择器
            el:'#app',
            //数据中心
            data(){

                return{
                   pic:'./img/1.png',
                   isShow:true
                }

            },
            methods:{
                change(){
                    this.isShow=!this.isShow
                }

            }
        })
</script>

分析：

如果我们给 transition组件 设置属性name，命名为fade。我们在设置css样式的时候，v-开头 要换成 fade-开头。

  <div id="app">
        <transition name="fade">
            <p v-if="isShow">
                <img v-bind:src="pic" alt="">
            </p>
        </transition>
       
        <button @click="change">点击</button>
    </div>

 /* 第一次点击 透明度由1变成0 ，时长5s*/
    /* 第二次点击 透明度由0变成1 ，时长5s */
    .fade-enter-active,.fade-leave-active{
        transition: opacity 5s;
    }

    .fade-enter,.fade-leave-to{
        opacity:0
    }

 <script src="./js/vue.js"></script>
    <script>
        var vm=new Vue({
            //模板选择器
            el:'#app',
            //数据中心
            data(){

                return{
                   pic:'./img/1.png',
                   isShow:true
                }

            },
            methods:{
                change(){
                    this.isShow=!this.isShow
                }

            }
        })
    </script>

v-if 和v-show的区别：

v-if 与 v-show 都能控制dom元素在页面的显示和隐藏

v-if 相比 v-show 开销更大的（直接操作dom节点增加与删除）

如果需要非常频繁地切换，则使用 v-show 较好

如果我们给 transition组件 设置属性name，命名为bounce。我们在设置css样式的时候，v-开头 要换成 bounce-开头。

.bounce-enter{
            opacity: 0;
         }
        .bounce-enter-active{
            /* 动画 */
            animation: bounce-in 3s linear;
        }
        .bounce-enter-to{
            opacity: 1;
        }
        @keyframes bounce-in{
                0%{
                    transform: scale(0);
                }
                50%{
                    transform: scale(1.5);
                }
                100%{
                    transform: scale(1);
                }
        }

        .bounce-leave{
            opacity: 1;
        }
       
        .bounce-leave-active{
            animation: bounce-out 3s linear;
        }
       
        .bounce-leave{
            opacity: 0;
        }
        @keyframes bounce-out {
            0%{
                transform: scale(1);
            }

            50%{
                transform: scale(1.5);
            }
            100%{
                transform: scale(0);
            }
        }

 <div id="app">
            <transition name="bounce">
                <p v-if="isshow">
                  工业界会导致AW认可了客户移民美国迫使可供游客护送开门红电话卡
                </p>      
            </transition>
            <button @click="change">点击</button>
        </div>

 <script src="./js/vue.js"></script>
    <script>
        var vm=new Vue({
            //模板选择器
            el:'#app',
            //数据中心
         

                data:{
                    isshow:true,
             
                },
                   

            methods:{
                change(){
                    this.isshow=!this.isshow
                }

            }
        })
    </script>

 预览：

 

1.1.2 结合第三方动画库

vue中 使用 第三方动画库，没有使用 vue自带的 6个类。它和这6个类没有任何关系。

结合第三方动画库animate.css一起使用animate.css 官网地址 Animate.css | A cross-browser library of CSS animations.

下载、安装animate.css库

使用方法：

在标签上要使用 2个类，animate__animated 这个必须写。

然后到 官网 Animate.css | A cross-browser library of CSS animations.  复制 指定的类，在相应的标签上去使用即可。

<link rel="stylesheet" href="./css/animate.css">
<link rel="stylesheet" href="./css/animate.min.css">
<body>
    <div id="app">
        <h1 class="animate__animated animate__bounce">网易</h1>
        <h1 class="animate__animated animate__backOutDown">优酷</h1>
        <h1 class="animate__animated animate__rubberBand">爱奇艺</h1>
       
    </div>
</body>

预览：