【问题标题】:How to smooth the transition animation in VueJS如何在 VueJS 中平滑过渡动画
【发布时间】:2020-04-16 14:53:25
【问题描述】:

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

最后的状态:

这是临时工作的 Codepen: Codepen Link

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

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

【问题讨论】:

标签: css vue.js vuetify.js


【解决方案1】:

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

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

【讨论】:

    猜你喜欢
    • 2015-05-07
    • 2021-09-03
    • 2020-10-08
    • 2013-08-02
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2014-04-10
    • 1970-01-01
    相关资源
    最近更新 更多