vue.js - 使用计算的元素上的 vue 转换

Question

我有一些通过计算属性呈现的文本。除了在元素上使用 transition: all 0.5s 之外，有没有一种方法可以使用 Vue 转换标签将转换输出延迟更改为延迟转换？

标签： vue.js

Answer 1

Vue 提供 out-in 和 in-out 的过渡模式

in-out：新元素先过渡进来，完成后，当前元素过渡出去。

out-in：当前元素先转出，完成后，新元素转入。

现在让我们用 out-in 更新我们的开/关按钮的转换：

<transition name="fade" mode="out-in">
  <!-- ... computed prop ... -->
</transition>

进出模式不经常使用，但有时对于稍微不同的过渡效果很有用。

来源：https ://vuejs.org/v2/guide/transitions.html#Transition-Modes