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

【问题标题】：Can't get Vue.js CSS transition to work?无法让 Vue.js CSS 过渡工作？
【发布时间】：2016-11-21 02:41:01
【问题描述】：

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>

但是，它似乎不起作用。有什么建议吗？

【问题讨论】：

【解决方案1】：

将 v-transition 更改为 transition。

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

【讨论】：

【解决方案2】：

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

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

【讨论】：