首页 > 代码库 > vue个人学习(二)----过渡、动画

vue个人学习(二)----过渡、动画

动画设置方法:

首先使用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>

 

vue个人学习(二)----过渡、动画