码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2017-04-30 23:03:24      阅读:201      评论:0      收藏:0      [点我收藏+]

标签:动画   nim   animate   img   alt   tran   log   命名   运动   

动画设置方法:

首先使用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个人学习(二)----过渡、动画

标签:动画   nim   animate   img   alt   tran   log   命名   运动   

原文地址:http://www.cnblogs.com/goodxiao/p/6790562.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!