什么是過(guò)渡模式?

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

　　過(guò)渡模式的原理是,設(shè)置有序的過(guò)渡而不是同時(shí)發(fā)生過(guò)渡。在transition中加人mode屬性，它有兩個(gè)值,分別是in-out和out-in,out-in表示當(dāng)前元素先進(jìn)行過(guò)渡，完成之后新元素過(guò)渡進(jìn)入,in-out表示新元素先進(jìn)行過(guò)渡，完成之后當(dāng)前元素過(guò)渡離開(kāi)。下面我們通過(guò)例4-11演示通過(guò)out-in實(shí)現(xiàn)開(kāi)關(guān)的切換過(guò)渡效果。
     【例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)前元素過(guò)渡完成之后，新元素才會(huì)過(guò)渡進(jìn)來(lái)。