1

I'm trying to implement a enter/exit transition for my div,

But I want my div can enter from left, and exit to right,

after playing with the example here, I still can not figure it out.

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

How do I do it ?

Littlee
  • 3,791
  • 6
  • 29
  • 61

1 Answers1

0

Replace the Modal definition in your link with the following code. It will make the modal enter from top and exit from bottom.

The basic idea is to make the div exit from the opposite side in a visible way and go back to the origin in an invisible way.

 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] })
    }
  }
});
Shawn Chen
  • 1,017
  • 2
  • 13
  • 24
  • I can confirm that this doesn't work (Oct 2019) because when fading in, the y position is not animated. The OP wants the slide to work both ways – AlexMorley-Finch Oct 23 '19 at 14:48