教育行业A股IPO第一股(股票代码 003032)

全国咨询/投诉热线:400-618-4000

什么是过渡模式?

更新时间:2022年02月09日10时28分 来源:大阳城app官网入口 浏览次数:

        新旧两个元素参与过渡的时候,新元素的进入和旧元素的离开会同时触发,这是因为 的默认行为和离开同时发生了。如果要求离开的元素完全消失后,进入的元素再显示出米(如开关的切换),可以使用 transition 提供的过渡模式mode,来解决当一个组件离开后,另一个组件进来时发生的位置的闪动或阻塞问题。

  过渡模式的原理是,设置有序的过渡而不是同时发生过渡。在transition中加人mode属性,它有两个值,分别是in-out和out-in,out-in表示当前元素先进行过渡,完成之后新元素过渡进入,in-out表示新元素先进行过渡,完成之后当前元素过渡离开。下面我们通过例4-11演示通过out-in实现开关的切换过渡效果。
     【例4-11】
      创建C:\vue\chapter04\demo11.html文件,具体代码如下:


  在上述代码中,第6行在标签中加入mode属性值为out-in,表示当前元素过渡完成之后,新元素才会过渡进来。

0 分享到:
和我们在线交谈!
Baidu
sogou