reactjs - react-pose: enter from left, exit from right
问题描述
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 ?
解决方案
将链接中的模态定义替换为以下代码。它将使模态从顶部进入并从底部退出。
基本思路是让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] })
}
}
});
推荐阅读
- jsf - JSF 2.3.3 jar - 错误消息 JSP.2.3.4 在这种情况下不允许文字值
- php - 正则表达式从一个单词开始直到特定的单词/字符/空格
- r - 计算两个 GPS 坐标之间的多个距离并将结果分类为两列
- android - 如何在 Android 上为 VR 流式传输 360° 4k 视频?
- mysql - 创建mysql存储过程生成db
- xslt - 单个 XSLT when 语句中的多个条件
- java - 为什么?完全 gc 发生在两次次要 gc 之前?
- xamarin - DeviceInformation.FindAllAsync 找不到相同数量的 COM 端口
- c# - 使用授权服务器的 REST API 到 API 身份验证
- python - numpy: linspace 计算生成 nan。如何从两个数组中删除点对?