Vue的过渡
單元素過渡
?1、css過渡
? ? ? ? Vue.js提供了內置的過渡封裝組件transition，該組件用于包含要實現過渡效果的DOM元素。transition組件只會把過渡效果應用到其它包含的內容上，而不會額外渲染DOM元素。過渡封裝組件的語法格式如下:
<transition name="nemeoftransition"><div></div></transition>語法中的nameoftransition參數用于自動生成CSS過渡類名。
為元素和組件添加過渡效果主要應用在下列情形中：
CSS過渡的基礎用法:
<style>.ikun-enter-active,.ikun-leave-active{transition: opacity 2s;}.iukn-enter,.ikun-leave-to{opacity: 0;} </style> <div id="element"><div><button v-on:click="show=!show">切換</button><transition name="ikun"><p v-if="show">荔枝，你讓我拿什么荔枝啊？</p></transition></div> </div><script src="http://60.205.187.0/vue/vue.js"></script> <script type="text/javascript">//創建根實例var demo = new Vue({el: '#element',data: {show:true}})</script>?????
2、過渡的類名介紹：?
| class類名 | 說明 |
| v-enter | 定義進入過渡的開始狀態，在元素被插入之前生效，在元素插入的下一幀移除 |
| v-enter-active | 定義進入過渡生效時的狀態。在整個進入過渡的階段中應用，在元素被插入之前生效，在過渡、動畫完成之后移除。這個類可以被用來定義進入過渡的過程時間、延遲和曲線函數 |
| v-enter-to | 定義進入過渡的結束狀態。在元素被插入之后下一幀生效（與此同時v-enter被移除），在過渡、動畫完成之后移除 |
| v-leave | 定義離開過渡的開始狀態。在離開過渡被觸發時立刻生效，下一幀被移除 |
| v-leave-active | 定義離開過渡生效時的狀態。在整個離開過渡的階段中應用，在離開過渡被觸發時立刻生效，在過渡、動畫完成之后移除。這個類可以被用來定義離開過渡的過程時間、延遲和曲線函數 |
| v-leave-to | 定義離開過渡的結束狀態。在離開過渡被觸發之后下一幀生效（與此同時v-leave被移除），在過渡、動畫完成之后移除 |
?對于這些在過渡中切換的類名來說，如果使用一個沒有名字的<transition>，則v-是這些類名的默認前綴。
2、CSS動畫
CSS動畫和的用法和CSS過度類似，但是在動畫中v-enter類名在節點插入DOM后不會立即刪除，而是在animationend事件觸發時刪除。以縮放的動畫形式隱藏和顯示文字的示例代碼如下：
<style>p{font: 30px;margin: 30px auto;font-weight: 500;color: green;}/**設置animation屬性的參數**/.ikun-enter-active{animation: scaling 1s;}.ikun-leave-active{animation: scaling 1s reverse;}/**設置元素的縮放轉換**/@keyframes scaling{0%{transform: scale(0);}50%{transform: scale(1.2);}100%{transform: scale(1);}} </style> <div id="element"><div><button v-on:click="show=!show">切換</button><transition name="ikun"><p v-if="show">他拿姜拿到手軟，你打字打到手軟，所以這就是區別。你有什么資格黑他?</p></transition></div> </div><script src="http://60.205.187.0/vue/vue.js"></script> <script type="text/javascript">//創建根實例var demo = new Vue({el: '#element',data: {show:true}})</script>??
3、自定義過渡的類名：
除了使用普通的類名(如*-enter、*-leave)之外，也可以自定義過渡類名。自定義過渡的類名的優先級高于普通的類名。通過自定義普通過渡類名可以使用過渡系統和其它第三方CSS動畫庫（如animate.css）的組合。自定義過渡類名可以通過以下6個屬性實現:
?使用示例：
<link href="https://unpkg.com/animate.css@3.5.1/animate.min.css" rel="stylesheet" type="text/css"> <style>p {font: 30px "微軟雅黑";margin: 30px auto;font-weight: 500;color: green;} </style> <div id="element" align="center"><button v-on:click="show=!show">切換</button><transition name="rotate" enter-active-class="animated rotateIn" leave-active-class="animated rotateOut"><p v-if="show">他拿姜拿到手軟，你打字打到手軟，所以這就是區別。你有什么資格黑他?</p></transition> </div><script src="http://60.205.187.0/vue/vue.js"></script> <script type="text/javascript">//創建根實例var demo = new Vue({el: '#element',data: {show: true}})</script>4、元素過渡使用JavaScript鉤子函數
元素過渡還可以使用JavaScript鉤子函數來實現，實現文字顯示和隱藏時的不同效果示例：
<style>p{font: 30px;margin: 30px auto;font-weight: 500;color: green;}/**設置元素的縮放轉換**/@keyframes scaling{0%{transform: scale(0);}50%{transform: scale(1.2);}100%{transform: scale(1);}}/**創建旋轉動畫**/@-webkit-keyframes rotate{0%{-webkit-transform:rotateZ(0) scale(1);}50%{-webkit-transform:rotateZ(350deg) scale(0.6);}100%{-webkit-transform:rotateZ(720deg) scale(0.1);}} </style> <div id="element" align="center"><div><button v-on:click="show=!show">切換</button><transition v-on:enter="enter" v-on:leave="leave" v-on:after-leave="afterLeave"><p v-if="show">作為一名ikun真的已經麻木了 ，解釋沒用，去反駁得到的只會是一堆表情包</p></transition></div> </div><script src="http://60.205.187.0/vue/vue.js"></script> <script type="text/javascript">//創建根實例var demo = new Vue({el: '#element',data: {show:false},methods:{enter:function(el,done){el.style.opacity=1;el.style.animation='scaling 1s' //實現縮放},leave:function(el,done){el.style.animation='rotate 2s linear' //實現旋轉setTimeout(function(){done()},2000)},afterLeave:function(el){ el.style.opacity=0; //在leave函數中觸發回調后執行afterLeave函數}}})</script>多元素過渡
?1、基礎用法：
最常見的多元素過渡是一個列表和描述這個列表為空消息的元素之間的過渡。在此處理多元素過渡時可以使用v-if和v-else。示例：
<style>.ikun-enter-active,.ikun-leave-active{transition: opacity 0.5s;}.iukn-enter,.ikun-leave-to{opacity: 0;} </style> <div id="element"><div><button v-on:click="clear">清空</button><transition name="ikun"><ol v-if="items.length > 0"><li v-for="item in items">{{item}}</li></ol><p v-else>列表為空</p></transition></div> </div><script src="http://60.205.187.0/vue/vue.js"></script> <script type="text/javascript">//創建根實例var demo = new Vue({el: '#element',data: {items:['唱','跳','rap','籃球']},methods:{clear:function(){this.items.splice(0);//清空數組}}})</script>?2、key屬性
? ? ? ? 當有相同標簽名的多個元素進行切換時，需要使用key屬性設置唯一的值來標記以讓Vue來區分他們。示例：
<style>.ikun-enter-active,.ikun-leave-active{transition: opacity 1s;}.iukn-enter,.ikun-leave-to{opacity: 0;} </style> <div id="element"><div><button v-on:click="show=!show">切換</button><transition name="ikun"><p v-if="show" key="lizhi">荔枝，你讓我拿什么荔枝啊？</p><p v-else key="kun">北冥有魚,其名為鯤</p></transition></div> </div><script src="http://60.205.187.0/vue/vue.js"></script> <script type="text/javascript">//創建根實例var demo = new Vue({el: '#element',data: {show:true}})</script>3、過渡模式
在<transition>的默認行為中，元素的進入和離開是同時發生的。由于同時生效的進入和離開的過渡不能滿足所有要求，所以Vue.js提供了如下兩種過渡模式:
?
?
多組件過渡
多個組件的過渡不需要使用key屬性，只需要使用動態組件，示例如下:?
<style>.ikun-enter-active,.ikun-leave-active{transition: opacity 1s;}.iukn-enter,.ikun-leave-to{opacity: 0;} </style> <div id="element"><div><button v-on:click="change">切換組件</button><transition name="ikun" mode="out-in"><component :is="componentName"></component></transition></div> </div><script src="http://60.205.187.0/vue/vue.js"></script> <script type="text/javascript">//創建根實例var demo = new Vue({el: '#element',data: {componentName:'componentA'},components:{componentA:{template:'<p>組件A</p>'},componentB:{template:'<p>組件B</p>'}},methods:{change:function(){this.componentName=this.componentName=='componentA'?'componentB':'componentA';}}})</script>?
?
列表過渡?
實現列表過渡需要使用v-for和<transition-group>組件，該組件的特點如下。
實現數字列表中插入和移除數字時的過渡效果,示例如下：
<style>.list-item{display: inline-block;margin-right: 10px;background-color: darkgray;width: 30px;height: 30px;line-height: 30px;text-align: center;color: greenyellow;}/**插入過程和移除過程的過渡效果**/.ikun-enter-active,.ikun-leave-active{transition: all 1s;}/**開始插入和移除結束時的狀態**/.iukn-enter,.ikun-leave-to{opacity: 0;transform: translateY(30px);} </style> <div id="element"><div><button v-on:click="add">插入一個數字</button><button v-on:click="remove">移除一個數字</button><transition-group name="ikun" tag="p"><span v-for="item in items" v-bind:key="item" class="list-item">{{item}}</span></transition-group></div> </div><script src="http://60.205.187.0/vue/vue.js"></script> <script type="text/javascript">//創建根實例var demo = new Vue({el: '#element',data: {items:[1,2,3,4,5,6],nextNum:7},methods:{//生成隨機索引randomNumber:function(){return Math.floor(Math.random*this.items.length)},//添加數字add:function(){this.items.splice(this.randomNumber(),0,this.nextNum++)},//移除數字remove:function(){this.items.splice(this.randomNumber(),1)}}})</script>?
總結
