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

Posted 2023-02-22

【中文标题】无法让 Vue.js CSS 过渡工作？

【英文标题】：Can't get Vue.js CSS transition to work?

【发布时间】：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>  

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

JSFiddle

【参考方案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>