如何将 ReactCssTransitionGroup 与 animate.css 集成？答案

【问题标题】：How to Integrate ReactCssTransitionGroup with animate.css?如何将 ReactCssTransitionGroup 与 animate.css 集成？
【发布时间】：2016-11-04 12:17:39
【问题描述】：

我只是在尝试将 animate.css 与 react 过渡组集成。是的，我知道已经有一个问题存在。但这不再有效。我需要一个工作示例。这是我的尝试

<ReactCSSTransitionGroup transitionName={{enter: "animated", enterActive: "bounce", leave: "animated",leaveActive: "tada"}}>
    {this.props.children}
</ReactCSSTransitionGroup>

【问题讨论】：

标签： css animation reactjs animate.css

【解决方案1】：

示例：animate.css 与反应过渡组Jsfidle

class App extends React.Component {
    constructor(props){
        super(props);
        this.state={items: ['hello', 'world', 'click', 'me']};
    }
    handleAdd() {
        let {items} = this.state
        this.setState({items: [...items, 'new-element'+(items.length+1)]});
    }
    handleRemove(i) {
        var newItems = this.state.items.slice();
        newItems.splice(i, 1);
        this.setState({items: newItems});
    }
    render() {
        var items = this.state.items.map((item, i)=>
        <div key={item} className="block" onClick={this.handleRemove.bind(this, i)}>
        {item}
        </div>
    );
    return (
        <div>
        <button onClick={this.handleAdd.bind(this)}>Add Item</button>
        <CSSTransitionGroup
        transitionName={{
            enter: "animated",
            enterActive: "rubberBand",
            leave: "animated",
            leaveActive: "fadeOutRight"
        }}>
        {items}
        </CSSTransitionGroup>
        </div>
    );
}


}

【讨论】：