Как анимировать дочерний элемент в React-Spring?

Question

[xenonhammer]

Привет, друзья! Помогите, пожалуйста мне понять: У меня есть анимированный элемент и в нем число. Я хочу, анимировать число, каждый раз, когда оно меняется, не запуская анимацию родителя. У меня не получается сделать это. Я подготовил песочницу. Покажите логику, пожалуйста

https://codesandbox.io/s/boring-frog-f3h7x?file=/s...

Answer 1

[0xD34F]

Заворачиваете div с числом в отдельный экземпляр Spring, которому задаёте в качестве key само число:

<Spring
  key={this.state.number}
  from={{ opacity: 0, marginTop: 50 }}
  to={{ opacity: 1, marginTop: 0 }}
>
  {({ opacity, marginTop }) => (
    <div style={{ opacity, marginTop }}>{this.state.number}</div>
  )}
</Spring>