仅当用户从URL栏访问网站时才运行动画

我只想在用户从URL栏访问网站时运行动画
而不是在路线改变的时候。

这是我目前的解决方案

import React from 'react';
import Router from "next/router";

class Layout extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      oAni: true
    };
    this.routeChangeEnd = this.routeChangeEnd.bind(this);

  }

  componentDidMount(){
    Router.events.on('routeChangeComplete', this.routeChangeEnd);
  }
  componentWillUnmount() {
    Router.events.off('routeChangeComplete', this.routeChangeEnd);
  }
  routeChangeEnd() {
    this.setState({oAni: false});
  }
    render (){
      return (
        <>
          <OpeningAnimation st={this.state.oAni ? "flex" : "none"} aniEnd={()=>{this.setState({oAni: false})}} />

          <div>
            {this.props.children}
          </div>
          </div>
        </>
      );
    }
}

这个 aniEnd 在动画结束时触发。 但这是因为 memory leak 有时。

只有从URL栏访问网站时才触发动画的最佳解决方案是什么?