這次帶給大家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>
相信看了本文案例你已經掌握了方法,更多精彩請關注php中文網其它相關文章!
推薦閱讀:
以上是Vue+animate在專案中做出過渡動畫的詳細內容。更多資訊請關注PHP中文網其他相關文章!