無法使Vue.js CSS過渡正常工作？

Question

CSS轉換的文檔可以在這里找到。

可以肯定的是，我完全按照我的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>

Answer 2

將v-transition更改為just transition 。

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