无法让Vue.js CSS过渡工作？

Question

可以找到CSS转换的文档here。

非常确定我将JSFiddle确切地设置为需要如何设置才能实现过渡。不完全确定，因为文档对CSS转换有点了解。

有一些非常基本的HTML / CSS我希望能让Vue.js创建一个很好的淡入淡出效果：

CSS：

.fade-transition {
  opacity: 1;
  transition: all .45s linear;
}

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

HTML：

<div class="loading-overlay" v-if="loading" v-transition="fade">
  In 5 seconds, this overlay should fade out...
</div>  

然而，它似乎没有起作用。有什么建议？

JSFiddle

Answer 1

对于transition代码中的div属性，只需从v-之前删除transition即可。

<div class="loading-overlay" v-if="loading" transition="fade">
  In 5 seconds, this overlay should fade out...
</div>

Answer 2

将v-transition更改为转换。

<div class="loading-overlay" v-if="loading" transition="fade">
  In 5 seconds, this overlay should fade out...
</div>