Vue.js Vue进入/离开转换不'；它似乎不能很好地与不透明

Vue.js v2.2.1

JSFiddle：

“.fade enter to、.fade leave”应设置转换后的状态，但未按预期工作

期望值： 从“不透明度0”平滑过渡到“不透明度0.5”

实际值：

---

从“不透明度0”平滑过渡到“不透明度0.5”，然后突然跳到“不透明度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;

}

---

尽管这可以修复突然的转换，但如果将其应用于JSFIDLE，最终状态是

opacity:1

。但我需要的是最终状态是

opacity:0.5

@ZhihaoZhang这些状态只是过渡期，在过渡期之后，应用于DOM元素的任何CSS类都将呈现。

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

}