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;
}

“淡入-进入-到，.淡出-离开”应该在转换后设置状态，但不像预期的那样工作。

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

}