如何将 ReactCssTransitionGroup 与 animate.css 集成？

Posted 2023-03-06

【中文标题】如何将 ReactCssTransitionGroup 与 animate.css 集成？

【英文标题】：How to Integrate ReactCssTransitionGroup with 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>

【参考方案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>
    );