一、Vue css过渡的基本语法
<div v-if="show" :transition="expand">hello</div>
然后为 .expand-transition, .expand-enter 和 .expand-leave 添加 CSS
/* 必需 */ .expand-transition { transition: all .3s ease; height: 30px; padding: 10px; background-color: #eee; overflow: hidden; } /* .expand-enter 定义进入的开始状态 */ /* .expand-leave 定义离开的结束状态 */ .expand-enter, .expand-leave { height: 0; padding: 0 10px; opacity: 0; }
你可以在同一元素上通过动态绑定实现不同的过渡：
<div v-if="show" :transition="transitionName">hello</div>
new Vue({ el: '...', data: { show: false, transitionName: 'fade' } })
二、例子
1、例子1
<!DOCTYPE html> <html> <meta charset="utf-8"> <head> <title>vue</title> <script src="vue.js"></script> </head> <body> <div id="app"> <div v-if="show" :transition="transitionName">hello</div> <button v-on:click="change">toggle</button> </div> <style type="text/css"> .fade-transition { transition: all .3s ease; height: 30px; padding: 10px; background-color: #eee; overflow: hidden; } /* .expand-enter 定义进入的开始状态 */ /* .expand-leave 定义离开的结束状态 */ .fade-enter, .fade-leave { height: 0; padding: 0 10px; opacity: 0; } </style> <script> var vm=new Vue({ el: '#app', data: { show: true, transitionName:"fade" }, methods:{ change:function(){ this.show?this.show=false:this.show=true; } } }) Vue.transition('fade', { beforeEnter: function (el) { el.textContent = 'beforeEnter' }, enter: function (el) { el.textContent = 'enter' }, afterEnter: function (el) { el.textContent = 'afterEnter' }, enterCancelled: function (el) { // handle cancellation }, beforeLeave: function (el) { el.textContent = 'beforeLeave' }, leave: function (el) { el.textContent = 'leave' }, afterLeave: function (el) { el.textContent = 'afterLeave' }, leaveCancelled: function (el) { // handle cancellation } }) </script> </body>
效果
点击前
点击后的
2、例子2，css动画
</html> <!DOCTYPE html> <html> <meta charset="utf-8"> <head> <title>vue</title> <script src="vue.js"></script> </head> <body> <div id="app"> <span v-show="show" transition="bounce">Look at me!</span><br> <button @click="change">toggle</button> </div> <style type="text/css"> .bounce-transition{ display: inline-block; } .bounce-enter{ animation: bounce-in 5s; } .bounce-leave{ animation: bounce-out 5s; } @keyframes bounce-in{ 0%{ transform: scale(0); } 50%{ transform: scale(1.5); } 100%{ transform: scale(1); } } @keyframes bounce-out{ 0%{ transform: scale(1); } 50%{ transform: scale(1.5); } 100%{ transform: scale(0); } } } </style> <script> var vm=new Vue({ el: '#app', data: { show: true, transitionName:"fade" }, methods:{ change:function(){ this.show?this.show=false:this.show=true; } } }) </script> </body> </html>
3、例子3渐近过渡
<!DOCTYPE html> <html> <meta charset="utf-8"> <head> <title>vue</title> <script src="vue.js"></script> </head> <body> <div id="app"> <input v-model="jq"> <ul> <li v-for="item in list|filterBy jq" transition="staggered" stagger="100"> {{item.text}} </li> </ul> </div> <style type="text/css"> ul { padding-left: 0; font-family: Helvetica, Arial, sans-serif; } .staggered-transition { transition: all .5s ease; overflow: hidden; margin: 0; height: 20px; } .staggered-enter, .staggered-leave { opacity: 0; height: 0; } </style> <script> var vm=new Vue({ el: '#app', data: { jq:"", list:[ {text:"Bruce Lee"}, {text:"Jackie Chan"}, {text:"Chuck Norris"}, {text:"Jet Li"}, {text:"Kung Fury"} ] }, }) Vue.transition("stagger",{ stagger:function(index){ // 每个过渡项目增加 50ms 延时 // 但是最大延时限制为 300ms return Math.min(300,index*50) } }) </script> </body> </html>