Vue中有一个自带的transition组件,就是用来实现过渡效果的,具体怎么使用呢,很简单,其实就两个步骤:

①用transition组件,把要做过渡效果的元素包起来

②写上相应的过渡效果的css

是不是很简单,比把大象装冰箱还简单。然而,并没有,在这两个步骤中,我们要遵守一定的规则:

在第一步中,我们要给transition组件写一个name,例如

<div id="box" class="box">
  <div @click="showFn" class="green">
    <transition name="red"><div v-show="show" class="red"></div></transition>
  </div>
</div>

相对应的css也是有规则的,要根据transition是name属性延伸出来:[name]-enter、[name]-enter-active、[name]-leave、[name]-leave-active;

这四个属性分别是什么意思呢?

[name]-enter:显示或加载元素时的过渡效果的初始样式(在元素被插入之前生效,在元素被插入之后的下一帧移除)

[name]-enter-active:显示或加载元素时的过渡效果的动画样式(在整个进入过渡的阶段中应用,在元素被插入之前生效,在过渡/动画完成之后移除。)

[name]-leave:隐藏或删除元素时的过渡效果的初始样式(在离开过渡被触发时立刻生效,下一帧被移除)

[name]-leave-active:隐藏或删除元素时的过渡效果的动画样式(在整个离开过渡的阶段中应用,在离开过渡被触发时立刻生效,在过渡/动画完成之后移除。)

下面,上代码:

复制代码
.red{
    width: 100%;
    height: 100%;
    background-color: red;
    /*下面的样式可以不写,这里为了方便理解*/
    opacity: 1;
    margin-left:0;
}
.red-enter{
    opacity: 0;
    margin-left:100%;
}
.red-enter-active,.red-leave-active{
    transition: all 1s;
}
.red-leave{
    /*对于简单动画来说,[name]-leave也可以不写,多数情况下,此处的样式和元素正常显示是的样式是相同的*/
    opacity: 1;
    margin-left:0;
}
.red-leave-active{
    opacity: 0;
    margin-left:100%;
}
复制代码

这样,在控制transition内的div标签显示隐藏时,就有了过渡效果了,是不是很简单。

Logo

前往低代码交流专区

更多推荐