作为 React 的新手,我有这样一个问题 - 我有两个 React 组件,父组件是:
class Container extends Component {
render(){
if(!this.props.someProps){
return (
<div className="container-text">
<Intro />
</div>
)
} else {
return(
<div className="container-text">
Some text
</div>
)
}
}
}
父组件根据某个属性渲染子组件。子组件是:
export default class Intro extends Component{
constructor(props){
super(props)
this.state={
animated: false
}
}
componentDidMount(){
this.setState({
animated:true
})
}
render(){
return(
<CSSTransition
in={this.state.animated}
timeout={1000}
classNames='fade'>
<div>
<div className='intro-text'>
<p>choose</p>
<p>the</p>
<p>situation</p>
</div>
</div>
</CSSTransition>
)
}
}
当组件初始加载时,我会得到淡出动画,但是我不明白在它离开DOM时如何对其进行动画处理(基本上是当this.props.someProps为真且纯文本呈现在Container类中时)?