Question

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

当然，React有ReactCSSTransitionGroup，但在我看来它不够灵活。举个例子，假设我希望我的徽标每5秒钟就有一个简单的反弹动画，这很难做到，因为ReactCSSTransitionGroup仅在安装和卸载组件时动画化。

我也遇到了React Motion库，看起来非常酷，但是对于像弹跳徽标这样简单的东西，我觉得不值得引入这样的库并添加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％之间没有任何事情发生。

Answer 2

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

用法是这样的：

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

免责声明，我是作者。

在反应应用程序中仅使用jQuery进行动画制作

2 个答案: