vue为v-if添加过渡动画效果
单v-if的过渡动画当需要为html添加过渡动画的时候,可以在将被过渡的部分写在transition标签中,并为其添加name属性。(如果不添加会默认为v)。<transition name="plus-icon"><div class="icon-plus"v-if="flag"><img />...
·
单v-if的过渡动画
当需要为html添加过渡动画的时候,可以在将被过渡的部分写在transition标签中,并为其添加name属性。(如果不添加会默认为v)。
<transition name="plus-icon">
<div class="icon-plus"
v-if="flag">
<img />
</div>
</transition>
vue 为过渡动画添加了两对,共六种状态,分别是v-enter、v-enter-active、v-enter-to、v-leave、v-leave-active和v-leave-to。这六个也是相应的样式名。如果transition标签有name属性,则将v进行相应替换。
这里以enter为例,介绍v-enter、v-enter-active、v-enter-to这三种样式,leave状态类似。v-enter是过渡开始时的状态样式,v-enter-to是过渡结束后的样式,v-enter-active描绘整个过渡过程,填写过渡动作。
下面是具体的过渡样式,
.plus-icon-enter-active{
transition: opacity .5s;
}
.plus-icon-enter{
opacity: 0;
}
.plus-icon-leave-active{
transition: opacity .5s;
}
.plus-icon-leave-to{
opacity: 0;
}
因为我们的transition标签的name属性为plus-icon。所以样式名也进行了替换。plus-icon-enter表示过渡开始前的透明度为0,plus-icon-enter-active表示0.5内完成透明度的变化,变化的默认事件曲线为linear。这里没有写过渡结束后的透明度变化,因为v-if为true时的透明度为1。
.plus-icon-enter-to{
opacity: 1;
}
也可以这么写,即过渡结束后,透明度为1,效果也是一样的
更多推荐
所有评论(0)