什么是過渡模式?

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

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