outmode生成html,【Vue】vue动画，transition标签的 mode=”out-in” 属性不起作用？

用vue自带的动画实现了淡入淡出的效果，但是transition属性mode="out-in"不起作用，导致动画消失和显示出现了重叠，我希望动画消失和显示之间有一定的事件间隔，问题出在哪儿呢？

animation 1111

animation 2222

css如下：

//消失时间持续3s

.fade-enter-active{

transition: all 3s;

}

//显示时间持续1.5s

.fade-leave-active{

transition: all 1.5s;

}

.fade-enter, .fade-leave-active{

opacity: 0;

}

改成如下方式也无效：

//transition 添加属性 duration

//css对应修改为

.fade-enter-active{

transition-property: all;

}

.fade-leave-active{

transition-property: all;

}

.fade-enter, .fade-leave-active{

opacity: 0;

}

回答

在显示动画中，加上动画延时，这样就不会出现同步和重叠的情况，

但这样会有一种情况就是初始化的时候会慢，如果想要解决，还可以初始化后给他们加上一个class，

然后.fade-enter-active.xxxx 两个class都有就加上动画延时，transtion-delay，就能解决

.fade-enter-active{

transition: all 1.5s;

transition-delay: 2s;

}

.fade-leave-active{

transition: all 2.5s;

}

.fade-enter, .fade-leave-active{

opacity: 0;

}

这样可以了，但是为什么 transition标签属性mode="out-in" 为什么不起作用呢？

如下写法

animation 1111

animation 2222

需要key标识,二者不同。

默认判断使用的是 标签名。

有key 优先判断key。