作者热门文章
- objective-c - iOS 5 : Can you override UIAppearance customisations in specific classes?
- iphone - 如何将 CGFontRef 转换为 UIFont?
- ios - 以编程方式关闭标记的信息窗口 google maps iOS
- ios - Xcode 5 - 尝试验证存档时出现 "No application records were found"
我只是在尝试将 animate.css 与 React 过渡组集成。是的,我知道那里已经有一个问题。但这不再有效。我需要一个有效的示例。这是我的尝试
<ReactCSSTransitionGroup transitionName={{enter: "animated", enterActive: "bounce", leave: "animated",leaveActive: "tada"}}>
{this.props.children}
</ReactCSSTransitionGroup>
最佳答案
示例:带有 React 过渡组的 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>
);
}
}
关于css - 如何将 ReactCssTransitionGroup 与 animate.css 集成?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38156363/
我是一名优秀的程序员,十分优秀!