什么是過渡模式?

        新舊兩個(gè)元素參與過渡的時(shí)候，新元素的進(jìn)入和舊元素的離開會(huì)同時(shí)觸發(fā)，這是因?yàn)?lt;transition> 的默認(rèn)行為和離開同時(shí)發(fā)生了。如果要求離開的元素完全消失后，進(jìn)入的元素再顯示出米(如開關(guān)的切換),可以使用 transition 提供的過渡模式mode，來解決當(dāng)一個(gè)組件離開后,另一個(gè)組件進(jìn)來時(shí)發(fā)生的位置的閃動(dòng)或阻塞問題。

　　過渡模式的原理是,設(shè)置有序的過渡而不是同時(shí)發(fā)生過渡。在transition中加人mode屬性，它有兩個(gè)值,分別是in-out和out-in,out-in表示當(dāng)前元素先進(jìn)行過渡，完成之后新元素過渡進(jìn)入,in-out表示新元素先進(jìn)行過渡，完成之后當(dāng)前元素過渡離開。下面我們通過例4-11演示通過out-in實(shí)現(xiàn)開關(guān)的切換過渡效果。
     【例4-11】
      創(chuàng)建C:\vue\chapter04\demo11.html文件,具體代碼如下:

<style>
  .fade-enter, .fade-leave-to{ opacity: 0; }
  .fade-enter-active,.fade-leave-active{ transition:opacity .5s; }
</style>
<div id="app">
  <transition name="fade" mode="out-in">
    <button :key="isoff" @click="isoff=!isoff">
     {{isOff ? 'Off' : 'On'}}</button>
  </transition>
</div>
<script>
var vm = new Vue({el: '#app', data:{ isoff: false } })
</script>

  在上述代碼中，第6行在標(biāo)簽中加入mode屬性值為out-in，表示當(dāng)前元素過渡完成之后，新元素才會(huì)過渡進(jìn)來。