Реактивная поза: вход слева, выход справа

Question

Я пытаюсь реализовать переход входа / выхода для моего div,

Но я хочу, чтобы мой div мог войти слева и выйти вправо,

поиграв с примером здесь я все никак не могу разобраться.

https://popmotion.io/pose/learn/react-exit-enter-transitions/

Как мне это сделать?

Answer 1

Замените Модальное определение в вашей ссылке следующим кодом. Это заставит модал войти сверху и выйти снизу.

Основная идея состоит в том, чтобы сделать выход div с противоположной стороны видимым образом и вернуться к источнику невидимым способом.

 const Modal = posed.div({
  enter: {
    y: 0,
    opacity: 1,
    delay: 300,
    transition: {
      y: { type: 'spring', stiffness: 1000, damping: 15 },
      default: { duration: 300 }
    }
  },
  exit: {
    y: -50,
    opacity:0,

    transition: {y:({from,to})=>(
      { type: 'keyframes', values: [from, 50, to], times: [0, 0.99, 1]}),
      opacity: ({ from, to }) => (
        { type: 'keyframes', values: [from, 0, to], times: [0, 0.99, 1] })
    }
  }
});