教育行業A股IPO第一股(股票代碼 003032)

全國咨詢/投訴熱線:400-618-4000

什么是過渡模式?

更新時間:2022年02月09日10時28分 來源:傳智教育 瀏覽次數:

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

  過渡模式的原理是,設置有序的過渡而不是同時發生過渡。在transition中加人mode屬性,它有兩個值,分別是in-out和out-in,out-in表示當前元素先進行過渡,完成之后新元素過渡進入,in-out表示新元素先進行過渡,完成之后當前元素過渡離開。下面我們通過例4-11演示通過out-in實現開關的切換過渡效果。
     【例4-11】
      創建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行在標簽中加入mode屬性值為out-in,表示當前元素過渡完成之后,新元素才會過渡進來。

0 分享到:
红豆直播app黄台_红豆直播app下载免费_红豆直播app下载