vue transition

Question

<transition name="fade">
  <div class="miz-modal" v-show="visible">
    <div class="miz-modal-mask"></div>
  </div>
</transition>

<style>
.fade-enter {
  opacity: 0;
}
.fade-enter-active {
  transition: opacity 3s;
}
</style>

.fade这个类是作用于.miz-modal上面的，那么我改成如下的样式却没有任何效果，enter的时候让mask层变成透明，然后enter-active的时候，3s过渡变成不透明，哪里出了问题呢？DOM元素里面看不到任何有关fade的类名

.fade-enter .miz-modal-mask {
  opacity: 0;
}
.fade-enter-active .miz-modal-mask {
  transition: opacity 3s;
}

Answer 1

样式写的有问题，并没有指定离场时的过渡。

.fade-enter,
.fade-leave-to {
    opacity: 0;
}

.fade-enter-active,
.fade-leave-active {
    transition: opacity 3s;
}