我在标签列表上使用 ReactCSSTransitionGroup
,因此当用户删除一个标签时,它就会淡出。我注意到发生了一些跳跃,因此我放慢了动画过渡持续时间以查看发生了什么。
标签以一种奇怪的方式移动,并且由于宽度不同,当它消失时看起来有点刺耳。这就是 React 动画的工作原理,还是我做错了什么?
这是全速 (.3s) 的另一个示例。
代码如下:
let ReactCSSTransitionGroup = React.addons.CSSTransitionGroup;
TagList = React.createClass({
displayName: 'TagList',
propTypes: {
tags: React.PropTypes.array,
onTagClick: React.PropTypes.func.isRequired
},
render() {
let tags;
if (!this.props.tags) {
return false;
}
tags = this.props.tags.map((tag, i) => {
return <Tag key={i}
index={i}
onTagClick={this.props.onTagClick}>{tag}</Tag>
});
return (
<div className="tag-list">
<ReactCSSTransitionGroup transitionName="tag">
{tags}
</ReactCSSTransitionGroup>
</div>
)
}
});
Tag = React.createClass({
displayName: 'Tag',
propTypes: {
onTagClick: React.PropTypes.func.isRequired
},
render() {
return (
<span className="tag"
onClick={this.props.onTagClick.bind(null, this.props.index)}>
<span className="tag-name">{this.props.children}</span>
</span>
)
}
});
最佳答案
React 使用添加/删除元素的 key
来确定要为哪个 DOM 节点设置动画。您正在使用标签的数组索引作为键,但这在渲染中并不稳定。
例如,如果您有数组
[1, 2, 3, 4, 5]
然后您删除索引 2 处的项目,剩下
[1, 2, 4, 5]
但是,对于 React 来说,现在 4
看起来位于索引 2;将删除的 key
是 4
,因为数组中现在只有四个项目。这就是为什么在第一个示例中,您单击的标签被删除,但淡出的 DOM 节点是数组中最后项的原因。
解决方案是使用不会因每个单独标签而改变的 key (例如 ID 等,即使您只是在客户端上生成唯一的 ID。)
关于animation - React - 当项目离开 DOM 时跳跃动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32686793/