首页 > 代码库 > 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类名
-
v-enter: 定义进入过渡的开始状态。在元素被插入时生效，在下一个帧移除。 -
v-enter-active: 定义进入过渡的结束状态。在元素被插入时生效，在transition/animation完成之后移除。 -
v-leave: 定义离开过渡的开始状态。在离开过渡被触发时生效，在下一个帧移除。 -
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个人学习（二）----过渡、动画
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。