教你怎么使用Vue实现动画效果(附代码)
6940
下面本篇文章给大家介绍怎么使用Vue实现动画效果,有需要的朋友可以参考一下,希望对你们有帮助。
官方的demo点击显示与消失
<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的取值直接影响动画的过渡。
本文网址:https://www.zztuku.com/index.php/detail-9074.html
站长图库 - 教你怎么使用Vue实现动画效果(附代码)
申明:如有侵犯,请 联系我们 删除。
您还没有登录,请 登录 后发表评论!
提示:请勿发布广告垃圾评论,否则封号处理!!