Question

仅当用户从网址栏访问网站时，我才想播放动画
而不是当路线改变时。

这是我当前的解决方案

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。

仅当从网址栏访问网站时才触发动画的最佳解决方案是什么？

Answer 1

为了检查用户是否完成了SSR（服务器端渲染），换句话说，刷新页面并在URL栏中键入内容，您可以通过在getInitialProps中进行检查来找出来，如下所示：

static async getInitialProps({req}){
  if(req){
  // Called on server
  // Here you can set a variable true
  // Later on on the code if this variable is true, then trigger the animation
  } else {
    // Called on client
  }
 }

这是您需要做的。

仅当用户从网址栏中访问网站时运行动画

1 个答案: