framer-motion - узел dom не размонтируется сразу после выхода анимации

Я создал анимированный модальный контейнер, который по большей части работает нормально, единственная проблема заключается в том, что после выполнения анимации выхода требуется секунда или две, чтобы отключить (в этот период нельзя щелкнуть где-либо еще)

песочница кода - https://codesandbox.io/s/restless-platform-oovo1?file=/src/App.js.

Чтобы увидеть проблему ????????

  • нажмите кнопку показать модальную кнопку
  • Щелкните в любом месте, чтобы закрыть модальное окно
  • обратите внимание, что полоса прокрутки все еще существует, что означает, что модальное окно не отключено
  • Кроме того, вы не можете повторно открыть модальное окно сразу после нажатия кнопки открытия модального окна после выхода анимации (в течение этой 1 секунды)

Я видел safeToremove, но не понимал, как его использовать, так как нет надлежащей документации


reactjs javascript animation framer-motion
person Bhuvanesh Desai    schedule 05.08.2020    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Я согласен с тем, что документация немного расстраивает, когда это касается - вот что я узнал, играя с ней.

В документации показан код для usePresence () в компоненте присутствия:

import { usePresence } from "framer-motion"

export const Component = () => {
  const [isPresent, safeToRemove] = usePresence()

  useEffect(() => {
    !isPresent && setTimeout(safeToRemove, 1000)
  }, [isPresent])

  return <div />
}

Сначала это казалось произвольным / чисто примером. Однако, поэкспериментировав с ним, выяснилось, что если вы инициализируете usePresence (), этот код useEffect теперь необходим для правильной работы присутствия и отчасти определения функциональности присутствия. Попробуйте инициализировать usePresence, а затем закомментировав строку

// !isPresent && setTimeout(safeToRemove, 1000)

Это нарушит ваше живое присутствие.

Таким образом, функция setTimeout, обертывающая safeToRemove, на самом деле определяет основные функции AnimatePresence и может определить время, в течение которого виртуальная DOM снова становится доступной для кликов и т. Д.

Теперь я играл с кроссфейдером AnimateSharedLayout, поэтому было немного странно возиться с временем safeToRemove, когда я не определял сами анимации, но если вы настраиваете анимацию для модальное окно, я думаю, что если вы синхронизируете время в этой функции setTimeout с длиной анимации, это должно решить вашу проблему.

Я все еще пытаюсь понять, как все это работает, поэтому прокомментируйте и дайте мне знать, что вы обнаружите, и мы будем на один шаг ближе к освоению с использованием новейших инструментов Framer v2.

person Reid Plumlee    schedule 16.09.2020