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

实际： 从“不透明度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;

}