离开动画完成后有没有办法运行功能?或者是我使用low-level animation API的唯一选择?如果是这种情况,我认为我必须自己实现所有转换功能(transitionend,reflows等)?
JS
var ReactCSSTransitionGroup = React.addons.CSSTransitionGroup;
var SignalContent = React.createClass({
render: function() {
return (
<div className='signal'>
<p className='signal-message'>{this.props.message}</p>
<button onClick={this.props.onClose} aria-label='Close'><span className='material-icons'>close</span></button>
</div>
);
}
});
var Signal = React.createClass({
handleClose: function() {
this.setState({active: false})
// this.props.onClose();
},
getInitialState: function() {
return {
active: true
};
},
render: function() {
return (
<ReactCSSTransitionGroup transitionName='signal-transition' transitionAppear={true} component='div'>
{this.state.active ? <SignalContent message={this.props.message} onClose={this.handleClose} /> : ''}
</ReactCSSTransitionGroup>
);
}
});
var container = document.getElementById('container');
function handleClose() {
React.unmountComponentAtNode(container);
}
React.render(<Signal message='test message' onClose={handleClose} />, container);
CSS
.signal {
padding: 10px;
color: #fff;
background-color: #000;
}
.signal-transition-appear {
opacity: 0;
}
.signal-transition-appear-active {
opacity: 1;
transition: .5s;
}
.signal-transition-leave-active {
opacity: 0;
transition: .5s;
}
JSFiddle。在示例中,我尝试在信号完成动画时运行handleClose()
。