Animation 反应-项目离开DOM时的跳跃动画

我在标签列表上使用了

reactcstransitiongroup

，因此当用户删除一个标签时，它就会消失。我注意到有点神经质，所以我减慢了动画转换的持续时间，看看发生了什么

标签以一种奇怪的方式移动，由于宽度不同，当它消失时看起来有点刺耳。这就是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>
    )
  }
});

让reactcstransitiongroup=React.addons.cstransitiongroup；
标记列表=React.createClass({
displayName:“标记列表”，
道具类型：{
标记：React.PropTypes.array，
onTagClick:React.PropTypes.func.isRequired
},
render（）{
让标签；
如果（！this.props.tags）{
返回false；
}
tags=this.props.tags.map（（tag，i）=>{
返回{tag}
});
返回(
{tags}
)
}
});
Tag=React.createClass({
displayName:'标记'，
道具类型：{
onTagClick:React.PropTypes.func.isRequired
},
render（）{
返回(
{this.props.children}
)
}
});

React使用添加/删除元素的

键来确定要为哪个DOM节点设置动画。您将标记的数组索引用于键，但这在渲染中并不稳定

例如，如果您有数组

[1, 2, 3, 4, 5]

删除索引2中的项目，剩下的是

[1, 2, 4, 5]

然而，要作出反应，现在看来
4
处于指数2；将被删除的
键是
4
，因为现在数组中只有四项。这就是为什么在第一个示例中，您单击的标记被删除，而淡出的DOM节点是数组中最后一个项的

解决方案是为每个标签使用一个不会改变的密钥（例如，ID等，即使您只是在客户端生成唯一的ID。）
您能为您的about输出设置一个演示吗？JSfiddle.net或？@ManojKumar我在帖子中添加了一些代码。