javascript - 仅在 React 应用程序中使用 jQuery 制作动画

Question

所以在花了一些时间使用 React(与 Redux)之后，我注意到除了动画之外，一切都非常好。

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

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

所以我想问那些有 React 经验的人，你对使用 jQuery(再加上 Animate.css)制作动画有什么想法？我知道访问 DOM 很慢，并且 React 不鼓励这样做，因为它也被认为是反模式，但我想知道对于这个用例来说这是否合理？访问真实 DOM 进行动画的“惩罚”会更明显吗？

编辑:上面的例子实际上并不好，因为它只能用CSS来完成，所以让我稍微改变一下。想象一下，每次反弹之间的时间应该是动态触发的，而不是固定的 5 秒。基本上，问题的重点是知道对于“稍微复杂”的动画(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% 没有任何反应。