为什么 React-Semantic-UI Transition 不为组件设置动画？

Question

我有一个 Modal 警报组件。为了制作模态动画，我使用了来自语义-ui-react 的Transition。但是只有少数动画（pulse、bounce、flash）在工作，而且也只在安装组件时工作，而在我关闭 Modal 时不工作。 duration 属性也不起作用。

class Alert extends React.Component {
  state = {
    open: true
  };

  close = () => {
    this.setState({
      open: false
    });
  };

  render() {
    const { open } = this.state;
    return (
      <Transition animation="fade" duration={1000} visible={open}>
        <Modal
          size="mini"
          closeOnDimmerClick={false}
          closeOnEscape={false}
          open={this.state.open}
          onClose={this.close}>

          <Modal.Content>
            <p>
              Hello user
            </p>
          </Modal.Content>
          <Modal.Actions>
            <Button color="blue" onClick={this.close}>
              Ok
            </Button>
          </Modal.Actions>
        </Modal>
      </Transition>
    );
  }
}

为什么会有这种奇怪的行为？我做错了什么？

Answer 1

Modal 是在 Transition 对其进行动画处理之前的卸载方式，一种方法是让 Transition 卸载模态：

class Alert extends React.Component {
  state = {
    open: true
  };

  close = () => {
    this.setState({
      open: false
    });
  };

  render() {
    const { open } = this.state;
    return (
      <Transition
        animation="fade"
        duration={1000}
        unmountOnHide={true}
        visible={open}
      >
        <Modal
          size="mini"
          closeOnDimmerClick={false}
          closeOnEscape={false}
          open={true}
          onClose={this.close}
        >
          <Modal.Content>
            <p>Hello user</p>
          </Modal.Content>
          <Modal.Actions>
            <Button color="blue" onClick={this.close}>
              Ok
            </Button>
          </Modal.Actions>
        </Modal>
      </Transition>
    );
  }
}

希望对您有所帮助！

为什么 React-Semantic-UI Transition 不为组件设置动画？

Why React-Semantic-UI Transition not animating the Component?

reactjs

semantic-ui-react

react-transition-group