<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>智能社——http://www.zhinengshe.com</title> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <style> p{ width:100px; height:100px; background: red; margin:10px auto; } </style> <script src="vue.js"></script> <link rel="stylesheet" href="animate.css"> <script> window.onload=function(){ new Vue({ el:'#box', data:{ show:false } }); }; </script> </head> <body> <div id="box"> <input type="button" value="点击显示隐藏" @click="show=!show"> <transition-group enter-active-class="zoomInLeft" leave-active-class="zoomOutRight"> <p v-show="show" class="animated" :key="1"></p> <p v-show="show" class="animated" :key="2"></p> </transition-group> </div> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>智能社——http://www.zhinengshe.com</title> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <style> p{ width:100px; height:100px; background: red; margin:10px auto; } </style> <script src="vue.js"></script> <link rel="stylesheet" href="animate.css"> <script> window.onload=function(){ new Vue({ el:'#box', data:{ show:'', list:['apple','banana','orange','pear'] }, computed:{//$watch，数据变化监听 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> <div id="box"> <input type="text" v-model="show"> <transition-group enter-active-class="zoomInLeft" leave-active-class="zoomOutRight"> <p v-show="show" class="animated" v-for="(val,index) in lists" :key="index"> {{val}} </p> </transition-group> </div> </body> </html>
vue动画 vue路由 -------------------------------------- transition 之前 属性 <p transition="fade"></p> .fade-transition{} .fade-enter{} .fade-leave{} -------------------------------------- 到2.0以后 transition 组件 <transition name="fade"> 运动东西(元素，属性、路由....) </transition> class定义: .fade-enter{} //初始状态 .fade-enter-active{} //变化成什么样 -> 当元素出来(显示) .fade-leave{} .fade-leave-active{} //变成成什么样 -> 当元素离开(消失) 如何animate.css配合用？ <transition enter-active-class="animated zoomInLeft" leave-active-class="animated zoomOutRight"> <p v-show="show"></p> </transition> 多个元素运动: <transition-group enter-active-class="" leave-active-class=""> <p :key=""></p> <p :key=""></p> </transition-group>