在组件道具更改时触发 CSS 过渡答案

【问题标题】：Trigger CSS Transition on component prop changes在组件道具更改时触发 CSS 过渡
【发布时间】：2020-02-27 04:51:11
【问题描述】：

我想在组件的 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"
  }
};

current sandbox

【问题讨论】：

除了链接之外，您还应该在问题正文中包含相关代码。它将确保在链接失效的情况下该问题仍然与任何发现它的人相关。
我也会看看this 包，它是我一直使用的。您还可以使用一些不错的高级包装器，但这可以完成工作。
我通常通过添加/删除特定类并在css中定义转换本身来做这种事情。

标签： javascript css reactjs

【解决方案1】：

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

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

将options 数组移动到state
将this.state.current 作为prop 传递给Option 组件
使用@keyframes 创建toggleIn 动画以创建所需的动画
在Option 组件中将key 属性设置为等于this.props.current，以确保在this.props.current 更改时随时重新挂载DOM 元素。这将确保我们的动画在每次 this.props.current 更改时运行。

【讨论】：