javascript - 无法让 Vue.js CSS 转换工作？

Question

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

很确定我设置了我的 JSFiddle 正是为了转换工作而需要设置它。不完全确定，因为 imo 文档对 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

对于 div 标签中的 transition 属性，只需删除 transition 之前的 v- 并它会起作用。

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