reactjs - React-Pose 动画退出问题
问题描述
我正在使用react-pose为窗口内外的通知设置动画。
“进入”过渡非常流畅,但在退出时 - 动画非常激进。
有没有人遇到过这个问题?我可以在任何地方上传视频屏幕截图来说明问题(除了 youtube)。
这是我的代码:
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import posed, { PoseGroup } from "react-pose";
import classNames from 'classnames';
import "./index.scss";
import key from 'keymaster';
import Notification from '../../components/Notification';
const NotificationPose = posed.div({
enter: {
opacity: 1,
x: '0%',
transition: {
duration: 300,
ease: 'easeIn'
}
},
exit: {
opacity: 0,
x: '100%',
transition: {
duration: 500,
ease: 'easeOut'
}
}
});
class NotificationCentre extends Component {
static propTypes = {
notifications: PropTypes.array,
};
static defaultProps = {
notifications: []
};
constructor(props) {
super(props);
this.className=this.keyScope='NotificationCentre';
}
render(){
return (
<div className={`${this.className}`}>
<PoseGroup>
{
this.props.notifications.map((d, i) => {
return (
<NotificationPose key={`notification-anim-${i}`}>
<Notification
key={`notification-${i}`}
active={false}
{...d}/>
</NotificationPose>
);
})
}
</PoseGroup>
</div>
);
}
}
const mapDispatchToProps = dispatch => ({});
const mapStateToProps = state => ({
tvShowsList: state.tvShows.fetchingTVShowsListHasSucceeded,
});
export default connect(mapStateToProps, mapDispatchToProps)(NotificationCentre);
解决方案
PosedGroup 要求每个孩子都有唯一的关键属性轨道进入和退出孩子。
如文档中所述(此处)
必须为每个孩子提供一个唯一的关键属性,以便 PoseGroup 跟踪进入和退出的孩子。
避免使用数组索引作为键,因为输入的新元素将与删除的元素具有相同的键。而是使用唯一的 id,例如notification.id
,它会正常工作。
推荐阅读
- angular - 刷新页面时使用Angular路由器获取url参数
- ios - 删除每个循环中的所有项目?
- python - 为什么我的 href 在 Django Python 中不起作用?
- excel - 如何在 SoapUI 中从 Excel 电子表格运行多个 SOAP 请求?
- javascript - 如何获取javascript当前日期
- python-3.x - SparkContext' 对象没有属性 'prallelize
- python - 如何在 python 中创建带有叶子和传单的网格密度覆盖层?
- mysql - Linq 将多个结果放在一个地方
- javascript - 当移动设备处于睡眠模式或浏览器处于后台时,如何使用 Web 应用程序在移动浏览器中使用 HTML Geolocation API 获取位置?
- python - 从多个子文件夹导入文件 python