TransitionGroup不会从DOM中删除元素

Question

我遇到一个问题，TransitionGroup没有删除DOM中的所有元素。

我想在2到4个元素之间切换。但是对于TransitionGroup，它始终在 3 和4个元素之间切换。我没有这种行为。

看看jsfiddle。如果您删除TransitionGroup，一切正常。

有什么想法吗？

请注意我故意使用TransitionGroup而不是 CSSTransitionGroup

谢谢！

Answer 1

看起来这是React中的一个真正的错误。查看这些GitHub问题#3111和#2549。

希望可以使用版本0.14修复。

Answer 2

所以，我在JS小提琴中注意到了一些事情。

首先，您需要引用React.addons.CSSTransitionGroup，而不是React.addons.TransitionGroup。将您的div包装在别名的TransitionGroup中，您没有提供任何功能，并且可能会在React中的协调过程中造成一些混淆。

其次，您需要为CSSTransitionGroup指定transitionName，和提供特定命名的CSS以与其一起使用。如果你看一下我的例子，我复制了它们在React文档中提供的相同CSS。如果需要，可以指定transitionLeave或transitionEnter为false，如果您只想在项目进入或离开时想要动画。

最后，你的其余代码都很好，但我建议你根据某些逻辑渲染你的div而不是将它们作为静态集合渲染，但这也取决于你想要完成的事情。我砍了一个工作的例子。不是最漂亮的代码，但它应该适用于您所追求的目标。

此外， KEYS 非常重要。使用数组索引并不是最稳定的事情，但它又取决于具体情况。键只需要在兄弟元素中是唯一的，所以在这种情况下，它可能没问题。只要知道如果你在渲染中看到奇怪的行为，并且你有一个正在渲染的元素数组，那么第一个要看的就是你的键。

JS Fiddle Example

React Docs on Animation

var ReactCSSTransitionGroup = React.addons.CSSTransitionGroup;

var App = React.createClass({

getInitialState() {
    return {
        expanded: true,
        divs: [1,2,3,4]
    }
},
render: function() {      

    var divs = [];

    if(this.state.expanded) {
          this.state.divs.map(function(div, index){
            divs.push(<div key={index}>{div}</div>);
        });                    
    } else {
        divs.push(<div key={0}>{this.state.divs[0]}</div>);
    }

    return (
        <div>
            <button type="button" onClick={this.toggleExpanded}>
                {this.state.expanded ? 'collapse' : 'expand'}
            </button>
            <ReactCSSTransitionGroup transitionName="example">
                {divs}
            </ReactCSSTransitionGroup>
        </div>
    )
},
toggleExpanded: function() {
    this.setState({
        expanded: !this.state.expanded
    });
}
});

React.render(<App />, document.getElementById('container'));