代码之家 › 专栏 › 技术社区 › evgeni fotia

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

next.js reactjs

evgeni fotia · 技术社区 · 5 年前

我只想在用户从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栏访问网站时才触发动画的最佳解决方案是什么?

1 回复 | 直到 5 年前

MoHo 5 年前

为了检查用户是否在另一个词中完成了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
  }
 }

这就是你需要做的。

推荐文章