How to make a transition when using conditional rendering in React

Question

Question details：

• native environment
• I couldn't use display:none
• I couldn't use transition:all
• I can only use animate through a method of js

My render function (not react-native) ：

render() { 
    return (
      <View className="container">
        <Touchable onPress={this.pressHandle}>Click</Touchable>
        <View ref="box">
          {this.state.show ? <Text className="show">show Text</Text> : null}
        </View>
      </View>
    );
  }

when I click the component Touchable, it whill change this.state.show,and conditional render the component <Text>

How can I use my animate function ,such as anmate(){...} to achieve transition？

I did it like this：(it didn't work)

pressHandle(){
  this.setState({
    show:!this.state.show
  });
  this.transitionHandle();
}
transitionHandle(){
  animate(this.refs.box,{
    opacity:1
    // ....
  })
}

Answer 1

You need to keep it rendered in the DOM so that you can apply CSS to it conditionally.

Change this:

{this.state.show ? <Text className="show">show Text</Text> : null}

To:

<Text className="show">show Text</Text>

And either change the CSS styles of your ref or add/remove a class name and control the transition completely in CSS.