vue.js - Vue transition中v-leave状态求解惑

问题描述

问 题

vue transition中有6种过渡状态，
从隐藏到显示的过程enter到enter-to，如期地将背景色从红色过渡到了绿色；
但是从显示到隐藏leave到leave-to过渡的背景色却未生效，
并没有能够像我预期的那样从leave的蓝色开始过渡到leave-to的橙色，
求赐教~

<transition name="a">
    <div class="shape" v-show="ifShow"></div>
</transition>

/6种过渡状态/

.a-enter{
    opacity: 0;
    background: red;
    transform: scale(0.2);
}
.a-enter-to{
    opacity: 1;
    background: rgba(34, 172, 56, 1);
}
.a-enter-active{
    transition: all 3s;
}
/*为啥leave的时候不是从蓝色开始过渡的呢？leave好像没有生效*/
.a-leave{
    opacity: 1;
    background: blue;
    transform: rotate(0deg);
}
.a-leave-to{
    opacity: 0;
    transform: rotate(-180deg) translateX(-100px);
    border-radius: 100px;
    background: orange;
}
.a-leave-active{
    transition: all 3s;
}

解决方案

认真测试了一下发现

• 元素背景为透明，v-enter为红

1. 元素未display：none 时，触发enter， vue先添加v-enter和v-enter-active再display：block显示出来，此时的元素为红色变成了 v-enter-to的颜色

• 元素背景为透明，v-leave为蓝色，leave-to为橙色

1. 元素此时为透明，vue先添加v-leave和v-leave-active，此时就已经开始产生透明到蓝色的过渡效果了（测试了chrome的确是这样处理），在添加v-enter-active，看起来就像是从透明变为橙色

• 单独的解决办法是添加v-leave后再setTimeout 0添加v-leave-active

这篇关于vue.js - Vue transition中v-leave状态求解惑的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！