Продолжительность анимации в 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

Вы должны установить свойство config для продолжительности.

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

Answer 2

Вы можете использовать свойство delay для управления анимацией,

Согласно документации

Задержка в мс перед запуском анимации (config.delay имеет приоритет если присутствует) * /

как это

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

Демо

Источник