Vue Transitions - 如何执行一次性开启和关闭动画

Question

我正在构建一个记笔记的 Vue 应用程序。 正在编辑的笔记每 X 秒自动保存一次。 每次自动保存时，我想在屏幕底部显示一条小消息，上面写着“Note Saved”。这将淡入停留 2 秒，然后自动淡出。

我之前在 Vue 中做过转换，但没有像这样的开关转换。 我可以使用包装在转换块中的 v-if 设置链接到元素的属性。但是然后我需要更改属性两次（真假）？我是否需要设置一个计时器来等待过渡结束，然后再将其设置为 false？似乎有点hackish。解决这个问题的最佳方法是什么？

Answer 1

我认为您用v-if 描述的内容是有道理的...您可以在相关组件的v-on:enter 方法中更改属性（或数据）。这会很好地将 行为 隔离到组件中，并且对未来的自己来说非常明显。

一种完全不同的方法是定义一个动画，其关键帧从隐藏过渡到显示再到隐藏，但这可能有点令人困惑：具有这种进入过渡的元素的离开过渡是什么？嗯。