reactjs - react-pose: enter from left, exit from right

Question

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 ?

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] })
    }
  }
});