Vue Enter/Leave Transition 似乎不适用于 Opacity

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”的平滑过渡

实际： 从“opacity 0”平滑过渡到“opacity 0.5”，然后突然跳转到“opacity 1”

Answer 1

Transition 类已被移除，并且该过渡没有适当的缓动，您应该在 .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;

}