React Spring Transition не работает должным образом

Итак, я просмотрел документы по реагирующим пружинам и уверен, что просто не понимаю их должным образом. Но я хотел, по сути, попытаться сделать div с enter анимацией и каким-то триггером, чтобы leave

Мне не удалось вызвать это leave. Кажется, я не могу понять, что заставляет его запускать функцию отпуска. Или, может быть, я просто не понимаю переход в целом, что вполне возможно.

Идея проста: я хочу иметь возможность вызвать что-то, чтобы что-то появилось в поле зрения, а затем, когда что-то еще происходит, заставить его исчезнуть из поля зрения.

Я взял пример из документации react-spring и создал свою собственную вилку, чтобы продемонстрируйте то, что я, кажется, неправильно понимаю.

Если вы перейдете в этот код и щелкните где-нибудь в поле отображения, вы заметите некоторую анимацию. Насколько я понимаю, переменная состояния isTrue должна сообщать переходу, в каком состоянии находиться. Поэтому, если она ложна, я предполагаю, что это вызовет выход. Но он не уходит, как вы можете видеть из примера, он остается в правиле enter (отображение равно block, а непрозрачность 1).

По сути, я бы хотел, чтобы он изначально появлялся в поле зрения, и когда я нажимаю на него, чтобы запускать правило leave и анимировать его, чтобы не отображать ничего и непрозрачность 0.

Любая помощь приветствуется.


reactjs react-spring
person Community    schedule 12.12.2020    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Основная функция перехода предназначена для отображения содержимого массива. Если вы манипулируете массивом, переход последует. Вы можете добавлять, вставлять и удалять элементы, а React Spring позаботится об анимации каждого элемента.

Когда вы используете переход для включения / включения одного элемента с логическим значением. Вы должны изменить свой метод рендеринга, чтобы добавить дополнительное условие (item &&) перед вашим компонентом. Как вы можете видеть в последнем примере здесь: https://www.react-spring.io/docs/hooks/use-transition

  {transitions.map(({ item, props, key }) => {
    const Page = pages[0]
    return item && <Page key={key} style={props} />
  })}

Это модифицированный код: https://codesandbox.io/s/xenodochial-buck-k40bj < / а>

person Peter Ambruzs    schedule 13.12.2020
comment
Хм, хорошо. Мне нужно будет разобраться в этом, но ваш пример делает именно то, что я хочу. Благодарю. - person ; 13.12.2020