vue个人学习----过渡动画

Posted 2020-09-15

动画设置方法：

首先使用transition标签将要进行运动的内容包裹并为其命名：

<transition name="fade">
    <p v-show="show">hello</p>
</transition>

 

然后在css中设置具体过渡效果：

            .fade-enter-active,
            .fade-leave-active {               //动画时间
                transition: transform 1.5s
            }
            
            .fade-leave-active,
            .fade-enter {                      //动画具体运动
                transform: translateX(300px);
            }

过渡的css类名

1. v-enter: 定义进入过渡的开始状态。在元素被插入时生效，在下一个帧移除。

2. v-enter-active: 定义进入过渡的结束状态。在元素被插入时生效，在 transition/animation 完成之后移除。

3. v-leave: 定义离开过渡的开始状态。在离开过渡被触发时生效，在下一个帧移除。

4. v-leave-active: 定义离开过渡的结束状态。在离开过渡被触发时生效，在 transition/animation 完成之后移除。

如果要使用外接的css动画库，如animate.css，可以通过在transition标签中添加属性来实现：

<transition name="fade" 
     enter-active-class="animated tada"                    //进入动画
     leave-active-class="animated bounceOutRight">         //离开动画
     <div id="div1" v-show="show"></div>
</transition>