在组件属性更改时触发 CSS 转换

Question

我想在组件的 prop 发生变化时淡入/淡出。我发现的一些基本示例通过切换元素样式的布尔条件来实现此目的，但我想通过道具更改来更新切换状态。

例如，在我的代码沙箱中，我有一些按钮，单击这些按钮将更新屏幕上的文本。我希望每当用户单击不同的选项时都能淡入/淡出此文本。

class Example extends Component {
  constructor(props) {
    super(props);
    this.state = {
      current: "dog",
      isVisible: false
    };
  }

  componentDidMount() {
    this.setState({ isVisible: true });
  }

  handleOnClick = option => {
    this.setState({ current: option });
  };

  // only used to test css transition
  forceToggleState = () => {
    this.setState(prevState => ({ isVisible: !prevState.isVisible }));
  };

  render() {
    const options = ["dog", "cat", "rabbit"];
    return (
      <div>
        {options.map((option, index) => (
          <button onClick={() => this.handleOnClick(option)} key={index}>
            {option}
          </button>
        ))}
        <div style={this.state.isVisible ? styles.toggleIn : styles.toggleOut}>
          {this.state.current}
        </div>
        <button onClick={this.forceToggleState}>toggle me</button>
      </div>
    );
  }
}

const styles = {
  toggleIn: {
    opacity: 1,
    transition: "all 0.5s ease",
    border: "1px solid red"
  },
  toggleOut: {
    opacity: 0,
    transition: "all 0.5s ease-in"
  }
};

当前沙箱

Answer 1

解决方案：https://codesandbox.io/s/react-example-lyf3f

我对您的沙箱进行了一些编辑以实现所需的功能。

1. 将options数组移入state
2. this.state.current作为 a传递prop给Option组件
3. toggleIn使用@keyframes创建动画来创建所需的动画
4. 将组件中的prop设置key为 equal ，以确保 DOM 元素在任何更改时都会重新安装。这将确保每次更改时我们的动画都会运行。this.props.currentOptionthis.props.currentthis.props.current