javascript - 在 React 应用程序中仅将 jQuery 用于动画

Question

所以在花了一些时间使用 React(与 Redux)之后，我发现一切都很好，除了动画。

当然，React 有 ReactCSSTransitionGroup，但在我看来它不够灵活。举个例子，假设我希望我的 Logo 每 5 秒有一个简单的弹跳动画，事实证明这很难做到，因为 ReactCSSTransitionGroup 仅在组件安装和卸载时才进行动画处理。

我还遇到了 React Motion 库，它看起来很酷，但是对于像弹跳 Logo 这样简单的事情，我觉得不值得引入这样的库并添加 10 多行代码。

所以我想问那些有 React 经验的人，你对使用 jQuery(连同 Animate.css)做动画有什么看法？我知道进入 DOM 很慢，React 不鼓励这样做，因为它也被认为是一种反模式，但想知道它是否适合这个用例？为动画访问真实 DOM 的“惩罚”是否会更加明显？

编辑:上面的例子实际上并不好，因为它可以单独用 CSS 完成，所以让我稍微改变一下。想象一下，每次反弹之间的时间应该是动态触发的，而不是固定的 5s。基本上，问题的重点是要知道如果对于“稍微复杂一些”的动画(CSS3 或 CSSTransitionGroup 不能轻松完成的动画)，jQuery 是否是一个很好的解决方案——或者如果可能的话，根本不使用 jQuery在.

Answer 1

如果像这样简单的事情，就使用 CSS3 动画。您可以只将类添加到元素中而忘记它。

@keyframes bounce {
    0%, 70%, 85%, 95%, 100% {transform: translateY(0);}
    80% {transform: translateY(-30px);}
    90% {transform: translateY(-15px);}
}
.bounce {
    animation-name: bounce;
    animation-duration: 3s;
    animation-fill-mode: both;
    animation-iteration-count: infinite;
}

<h1 class="bounce">Logo</h1>

要设置延迟，请调整关键帧并增加动画持续时间。例如，您会注意到从 0% 到 70% 什么都没有发生。