向下滚动时，Firefox 不会为反应网站的导航设置动画答案

【问题标题】：Firefox does not animate navigation of react website when scrolling down向下滚动时，Firefox 不会为反应网站的导航设置动画
【发布时间】：2019-10-10 15:22:46
【问题描述】：

我已经构建了一个导航，当用户向下滚动时它会隐藏，当用户向上滚动时会返回到视图中。这适用于 Chrome 和 Safari，但不适用于 Firefox。在 Firefox 上，导航不会做任何事情，除非我使用检查元素工具将鼠标悬停在它上面。

运行 React 16.9。我尝试了以下方法。

在最新版本的 chrome 和 firefox 上测试。

尝试使用 requestAnimationFrame
使用 rotate3d 让 gpu 接管
检查滚动事件是否触发（确实如此。）
尝试了使用不透明度而不是更改顶部的相同动画

一些代码：

//添加事件监听

  componentDidMount = () => {
    window.addEventListener('scroll', throttle(this.handleScroll, 100));
    window.addEventListener('keyup', this.handleKeyPress);
  }

// 事件触发什么

  handleScroll = () => {
    const { currentNodeType } = this.props;
    if (currentNodeType === 'landing_page') {
      this.setState({ navScrolled: window.scrollY > (window.innerHeight - 125) });
    } else {
      this.setState({ navScrolled: window.scrollY > 285 });
    }
    const { prevScrollpos } = this.state;

    const currentScrollPos = window.pageYOffset;
    const visible = !!(prevScrollpos > currentScrollPos || window.scrollY < 30);

    this.setState({
      prevScrollpos: currentScrollPos,
      visible,
    });
  }

然后根据其是否可见将类添加或删除到导航中

// 类

.nav-hidden {
  transition: all 0.333s ease-out;
  top: -125px;
}
.nav-visible {
  transition: all 0.333s ease-out;
  top: 0;
}

由于需要代表，我无法发布图片。（这是我关于堆栈溢出的第一个问题）

chrome 上的行为 - 期望的行为

https://imgur.com/WkhlS4Y.gif

firefox 上的行为 - 不良行为

https://imgur.com/hoEOP4x.gif

我希望我已经足够清楚了。提前致谢！

【问题讨论】：

标签： javascript reactjs firefox

【解决方案1】：

通过使用边距而不是顶部来解决此问题。

.nav-hidden {
  transition: all 0.333s ease-out;
  top: 0;
  margin-top: -125px;
}
.nav-visible {
  transition: all 0.333s ease-out;
  top: 0;
}

希望这会有所帮助！

【讨论】：