在 React 中使用条件渲染时如何进行转换

Question

问题详情：

• 原生环境
• 我无法使用display:none
• 我无法使用transition:all
• 我只能通过js的方法使用animate

我的渲染函数（不是 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>
    );
  }

当我点击组件Touchable时，它会改变this.state.show，并有条件地渲染组件<Text>

如何使用我的动画功能，如anmate(){...}实现转场？

我是这样弄的：（没用）

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

Answer 1

您需要保持它在 DOM 中呈现，以便您可以有条件地对其应用 CSS。

改变这个：

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

收件人：

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

要么更改引用的 CSS 样式，要么添加/删除类名并完全在 CSS 中控制过渡。