这次给大家带来vue+animate在项目中做出过渡动画，vue+animate在项目中做出过渡动画的注意事项有哪些，下面就是实战案例，一起来看一下。
简介：
transition方法的使用
transition内置方法
transition-group
animate库实现过渡动画
<!doctype html><html lang="en"><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <title>document</title> <script src="lib\vue.js"></script> <link rel="stylesheet" href="lib\animate.css" rel="external nofollow" > <style> [v-cloak] { display: none; } p { width: 100px; height: 100px; background: red; margin: 10px auto; } /* .fade-enter-active, .fade-leave-active { transition: 1s all ease; } .fade-enter-active { opacity: 1; width: 300px; height: 300px; } .fade-leave-active { opacity: 0; width: 100px; height: 100px; } .fade-enter, .fade-leave { width: 100px; height: 100px; opacity: 0; } */ </style> <script> window.onload = function() { new vue({ el: '#box', data: { show: '', list: ['apple', 'banana', 'orange', 'pear'] }, computed: { lists: function() { var arr = []; this.list.foreach(function(val) { if (val.indexof(this.show) != -1) { arr.push(val); } }.bind(this)) return arr; } } }) } </script></head><body> <p id="box" v-cloak> <input type="text" v-model="show"> <!-- class定义 .fade .fade-enter{} 初始状态 .fade-enter-active{} 进入过程 .fade-leave{} 离开状态 .fade-leave-active{} 离开过程 --> <transition-group enter-active-class="zoominleft" leave-active-class="bounceoutright"> <!-- 内置方法 @before-enter = "beforeenter" @enter = "enter" @after-enter = "afterenter" @before-leave = "beforeleave" @leave = "leave" @after-leave = "afterleave" --> <!-- transition-group 多个元素运动，注意绑定key:1 --> <p v-show="show" class="animated" v-for="(val, index) in lists" :key="index"> {{val}} </p> </transition-group> </p></body></html>
相信看了本文案例你已经掌握了方法，更多精彩请关注其它相关文章！
推荐阅读：
怎样在实战项目中使用installation插件
如何在项目中使用js事件委托
以上就是vue+animate在项目中做出过渡动画的详细内容。