首页技术文章正文

什么是过渡模式?

更新时间: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>