如何在VueJS中平滑过渡动画

Question

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

最后的状态：

这是临时工作的Codepen： Codepen Link

var2: "COMPUTER_{{ inventory_hostname.split('.').0.split('-').1 }}"

有什么方法可以平滑过渡吗？

Answer 1

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

我建议您在这里不要尝试依赖内置的Vuetify过渡，而应该采用基于CSS关键帧的简单策略（此处为an old but decent introduction to the approach）。另外，如果您想使用专门为动画制作的工具，尽管GSAP对于您描述的场景可能有些过头，但它与行业标准差不多。