如何在 VueJS 中平滑过渡动画

Question

我希望实现从一种状态到另一种状态的平滑过渡，如图所示：

最后的状态：

这是临时工作的 Codepen： Codepen Link

 <transition name="fade">
      <h1 v-if="!searchStatus">{{heading}}</h1>
    </transition>

有什么办法可以平滑过渡。

Answer 1

Vuetify 中内置的过渡非常非常简单，并且不是为看起来像您正在尝试构建的那种编排动画而设计的。它们用于显示或隐藏元素、在选项卡窗格中的选项卡之间移动等（即动画 single 元素），而不是用于协调 multiple 元素。不幸的是，正如 this blog post 中所说，“优秀的动画没有灵丹妙药。”

我建议您不要尝试在这里依赖内置的 Vuetify 过渡，而是采用基于 CSS 关键帧的简单策略（这里是 an old but decent introduction to the approach）。或者，如果您想使用专为动画构建的工具，GSAP 与现有的行业标准差不多，尽管对于您所描述的场景来说它可能有点过头了。