Блог

Я работаю над реализацией перехода «вход/выход» с помощью 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>