Vue 进入/离开转换似乎不适用于不透明度

Question

Vue.js v2.2.1

JSFiddle：https://jsfiddle.net/loop_/59g7w1pa/8/

.fade-enter-active, .fade-leave-active {
transition: opacity .5s;
}
.fade-enter, .fade-leave-to {
opacity: 0;
}
.fade-enter-to, .fade-leave {
opacity: 0.5;
}

".fade enter to，.fade leave"应该设置转换后的状态，但不能按预期工作。

预期：从"不透明度0"平滑过渡到"不透明度0.5">

实际：从"不透明度0"平滑过渡到"不透明度0.5"，然后突然跳到"不可见性1">

Answer 1

转换类被删除，并且转换没有适当的缓和，您应该向.square类添加转换属性。

.fade-enter,
.fade-leave-to {
opacity: 0;
}
.fade-enter-to,
.fade-leave {
opacity: .5;
}
.square {
margin-top: 2rem;
height: 10rem;
width: 10rem;
background-color: #000;
transition: opacity .5s linear;
}