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

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

例如，在我的代码沙盒中，我有几个按钮，当单击这些按钮时，将更新屏幕上的文本。我希望在用户单击其他选项时能够淡入/淡出此文本

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"
  }
};

类示例扩展组件{
建造师（道具）{
超级（道具）；
此.state={
当前：“狗”，
isVisible:false
};
}
componentDidMount（）{
this.setState（{isVisible:true}）；
}
handleOnClick=选项=>{
this.setState（{current:option}）；
};
//仅用于测试css转换
forceToggleState=（）=>{
this.setState（prevState=>（{isVisible:！prevState.isVisible}））；
};
render（）{
常量选项=[“狗”、“猫”、“兔子”]；
返回(
{options.map（（选项，索引）=>(
this.handleOnClick（option）}key={index}>
{option}
))}
{this.state.current}
切换我
);
}
}
常量样式={
切换：{
不透明度：1，
过渡：“所有0.5秒轻松”，
边框：“1px纯红”
},
切换：{
不透明度：0，
过渡：“所有0.5秒轻松进入”
}
};

解决方案：

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

将

选项

数组移动到

状态

将

此.state.current

作为

prop

传递给

选项

组件

使用@keyframes创建一个

toggleIn

动画以创建所需的动画

在

选项

组件中将

键

设置为等于

this.props.current

，以确保每当

this.props.current

更改时，DOM元素都会重新装载。这将确保每当

This.props.current

更改时，动画都会运行

---

除了链接外，您还应该在问题正文中包含相关代码。这将确保这个问题仍然是相关的任何人，发现它在事件中的链接曾经成为死亡。我也会看看包，这是我一直使用的。你也可以使用一些很好的高级包装器，但这样就完成了。我通常通过添加/删除一个特定的类来完成这类工作，并在css中定义转换本身。