react-pose：从左侧进入，从右侧退出

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