Реактивная пружина Анимирование переключателя

Question

Вот уже неделю как я ломаю голову от этого. Я использую реагирующую пружину для создания анимации перехода между страницами. Эти страницы определяются регистром переключения, который вызывается при рендеринге компонента React.

Я сделал быструю слишком простую песочницу со странным поведением:

https://codesandbox.io/s/50y5kkljz4

Большая часть этого кода является симуляцией моего более сложного стека. Ищу любые предложения и то, что я пропускаю.

Это ошибка от ответной пружины?

Я делаю что-то, что нет нет в React?

Можно ли даже анимировать (переключать) случаи?

Вещи, чтобы попробовать:

1. [Строка 71] Закомментируйте ключи от Компонента Перехода. Посмотрите, что результат.
2. [Строка 74] Закомментируйте отпускную опору из Компонента Перехода. Смотрите результат.

Полный справочник API для реактивной пружины

Заранее спасибо!

Answer 1

Вы должны сделать тонкую настройку. Вы переходите к <Transition> функция в виде:

function(styles) {
  return <div styles={styles}>getComponent(...)</div>;
}

Вы откладываете решение, какой именно это компонент, до оценки функции.

Как <Transition> повторное рендеринг, предыдущая функция и текущая функция будут вычислять один и тот же компонент, заданный текущим indexи вы видите этот эффект.

Вместо этого вы можете:

    <Transition
      keys={this.state.index}
      from={{ opacity: 0 }}
      enter={{ opacity: 1 }}
      leave={{ opacity: 0 }}
    >
      {wrap(this.selectContent(type))}
    </Transition>

где:

const wrap = cmp => styles => <div style={styles}>{cmp}</div>

то есть, учитывая фактический компонент, вернуть функцию, которая принимает react-spring стили и помещает их в обертку div.

Надеюсь, это поможет!