reactjs - 退出转换未触发 React Reveal

Question

我正在使用 React Reveal 实现滑入/滑出过渡，特别是https://www.react-reveal.com/examples/common/slide/，如下所示。

加载项目组件时会触发动画中的幻灯片，但是当我转到其他路线时，它不会触发退出动画。

import Slide from 'react-reveal/Slide';

class SlideExample extends React.Component {
  constructor(props) {
    super(props);
    this.state = { show: false };
    this.handleClick = this.handleClick.bind(this);
  }
  handleClick() {
    this.setState({ show: !this.state.show });
  }
  render() {
    return (
      <div>
        <Slide left opposite when={this.state.show}>
          <h1>React Reveal</h1>
        </Slide>
        <button
          className="btn btn-success my-5"
          type="button"
          onClick={this.handleClick}
        >
          { this.state.show ? 'Hide' : 'Show' } Message
        </button>
      </div>
    );
  }
}

export default SlideExample;

这是我的代码：

导航栏组件：

//state and handleClick function
  const [transition, setTransition] = useState(false);
  const [show, setShow] = useState(false);
  const activeCircle = useRef();

  const handleClick = (color, route) => {
    activeCircle.current = color;
    setTransition(!transition);
    setShow(!show);
    setTimeout(() => {
      color === "black"
        ? props.history.push("/")
        : props.history.push(`/${route}`);
    }, 1000);
  };

//div where show is being passed

        <div
          style={activeCircle.current === "blue" ? style : {}}
          className={`blueCircle ${transitionActive1}`}
          onClick={() => handleClick("blue", "projects")}
          show={show}
        ></div>

项目组件（在此处通过转换）：

<Slide top opposite when={props.show}>
  <div className="pleftColumn">
    <h1>Left Column</h1>
  </div>
</Slide>

标签： reactjs