javascript - 在 React 中使用条件渲染时如何进行过渡

Question

问题详情:

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

我的渲染函数(非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>

并且可以更改 ref 的 CSS 样式或添加/删除类名并完全在 CSS 中控制转换。