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

Question

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

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

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

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

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

Answer 1

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

@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% 什么都没有发生。

Answer 2

如果使用 CSS3 动画，您可以使用 react-animate-on-change 减少一些样板文件，假设您的状态在您希望动画发生时更新。例如一个监听 redux store 的组件。

用法是这样的：

// functional component
const Score = (props) =>
  <AnimateOnChange
    baseClassName="Score"
    animationClassName="Score--bounce"
    animate={props.diff != 0}>
      Score: {props.score}
  </AnimateOnChange>

免责声明，我是作者。

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

Using jQuery ONLY for animation in React application

javascript

reactjs

react-jsx