脚本宝典收集整理的这篇文章主要介绍了教你怎么使用Vue实现动画效果(附代码),脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
之前的文章《手把手教你使用CSS3制作一个简单页面的布局(代码详解)》中,给大家介绍了怎么使用CSS3制作一个简单页面的布局。下面本篇文章给大家介绍怎么使用Vue实现动画效果,有需要的朋友可以参考一下,希望对你们有帮助。
<div id="demo"> <button v-on:click="show = !show"> Toggle </button> <transition name="fade"> <p v-if="show">hello</p> </transition> </div> <script> new Vue({ el: "#demo", data: { show: true, }, }); </script> <style> .fade-enter-active, .fade-leave-active { transition: opacity 0.5s; } .fade-enter, .fade-leave-active { opacity: 0; } </style>
transition
使用<transition name="fade"> (元素,属性、路由....) </transition>
class
定义
.fade-enter{ }
进入过渡的开始状态,元素被插入时生效,只应用一帧后立即删除;(运动的初始状态)
.fade-enter-active{ }
进入过渡的结束状态,元素被插入时就生效,在transition/animation
完成之后移除。这个类可以被用来定义过渡的过程时间,延迟和曲线函数。
.fade-leave{ }
离开过渡的开始状态,元素被删除时触发,只应用一帧后立即删除;
.fade-leave-active{ }
离开过渡的结束状态,元素被删除时生效,在transition/animation
完成之后移除。这个类可以被用来定义过渡的过程时间,延迟和曲线函数。
默认的 .fade-enter
变成 .fade-in-enter
默认的 .fade-enter-active
变成 .fade-in-active
默认的 .fade-leave
变成 .fade-out-enter
默认的 .fade-leave-active
变成 .fade-out-active
<transition name="fade" enter-class="fade-in-enter" enter-active-class="fade-in-active" leave-class="fade-out-enter" leave-active-class="fade-out-active" > <p v-show="show">hello</p> </transition>
.fade-in-active, .fade-out-active { transition: all 0.5s ease; } .fade-in-enter, .fade-out-active { opacity: 0; }
transition
相关函数<transition name="fade" @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter" @before-leave="beforeLeave" @leave="leave" @after-leave="afterLeave" > <div v-show="show"></div> </transition> <script> export default { methods: { beforeEnter(el) { console.LOG("动画enter之前"); }, enter(el) { console.log("动画enter进入"); }, afterEnter(el) { console.log("动画进入之后"); el.style.background = "blue"; }, beforeLeave(el) { console.log("动画leave之前"); }, leave(el) { console.log("动画leave"); }, afterLeave(el) { console.log("动画leave之后"); el.style.background = "red"; }, }, }; </script>
transition
结合aniMATE.css
使用以下代码演示元素以 X 轴为基线,翻转进场出场的动画
Animate.css
库点这里地址:https://animate.style/
<!-- 翻转进场出场--> <transition enter-active-class="flipInX" leave-active-class="flIPOutX"> <div v-show="show" class="animated"></div> </transition> <!-- 或者 --> <transition enter-active-class="animated flipInX" leave-active-class="animated flipOutX" > <div v-show="show"></div> </transition>
<transition-group enter-active-class="flipInX" leave-active-class="flipOutX"> <div v-show="show" :key="x" v-for="x in 5"></div> </transition-group>
需要注意的是在group的时候,key的取值直接影响动画的过渡,详情请参阅vue动画key取值影响过渡动画表现
推荐学习:JavaScript视频教程
以上就是教你怎么使用Vue实现动画效果(附代码)的详细内容,更多请关注脚本宝典其它相关文章!
以上是脚本宝典为你收集整理的教你怎么使用Vue实现动画效果(附代码)全部内容,希望文章能够帮你解决教你怎么使用Vue实现动画效果(附代码)所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。