之前的文章《手把手教你使用css3制作一个简单页面的布局（代码详解）》中，给大家介绍了怎么使用css3制作一个简单页面的布局。下面本篇文章给大家介绍怎么使用vue实现动画效果，有需要的朋友可以参考一下，希望对你们有帮助。
官网 api 地址:https://cn.vuejs.org/v2/guide/transitions.html
官方的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的取值直接影响动画的过渡，详情请参阅vue动画key取值影响过渡动画表现
推荐学习：javascript视频教程
以上就是教你怎么使用vue实现动画效果（附代码）的详细内容。