The Animation problem of react dynamic rendering content

react uses

for conditional rendering.
{
    this.state.show ? <View/> : null
}

the content is rendered only when the condition is triggered, otherwise it is not rendered and is not controlled by display:none .

at a time like this, how do you realize the transition animation if you need to do it?

during the attempt, it is found that the DOM will be displayed directly and skip the animation effect. -sharp-sharp-sharp problem description

Mar.31,2021

although there is no code to implement it, I think we can try to repackage the layer 1 with div, and then put the transition animation on this div:

<div className={ this.state.show ? "animate-wrap active down-in" : "animate-wrap"}>
    { this.state.show ? <View/> : null }
</div>
Menu