React 中的动画持续时间 Spring

Question

我有一个相当简单的淡入场景，我想在其中控制动画的持续时间。但是我无法思考如何实现这一目标。

代码摘录：

function BoxA() {
  return (
    <Spring from={{ opacity: 0.2 }} to={{ opacity: 1 }}>
      {props => (
        <div
          style={{
            height: 100,
            width: 100,
            backgroundColor: "pink",
            color: "#fff",
            ...props
          }}
        >
          1
        </div>
      )}
    </Spring>
  );
}

完整代码示例：https://codesandbox.io/s/n7pw660264

Answer 1

可以使用延迟属性来控制动画，

根据文档

Delay in ms before the animation starts (config.delay takes precedence if present) */

像这样

<Spring from={{ opacity: 0.2 }} delay={1000} to={{ opacity: 1 }}></Spring>

Demo

Source

Answer 2

您必须为持续时间设置配置属性。

<Spring config={{duration: 5000}} from={{ opacity: 0.2 }} to={{ opacity: 1 }}>

React 中的动画持续时间 Spring

Animation duration in React Spring

reactjs

react-spring