ReactCssTransitionGroup을 animate.css와 통합하는 방법은 무엇입니까?

Question

animate.css를 반응 전환 그룹과 통합하려고합니다. 이미 하나의 질문이 있다는 것을 알고 있습니다. 그러나 더 이상 작동하지 않습니다. 실제 사례가 필요합니다. 이 내 시도

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

Answer 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> 
    ); 
} 


} 

반응