javascript - 防止在加载 React 组件时出现动画

Question

基本上，我有一个带有一些动画的组件，但我只想在用户在某个断点调整页面大小时显示它们(如果宽度 <800px，那么我重新排列 div，在这种情况下我想要显示动画)。

我设法做到了，但问题是，当我第一次加载页面时，动画会开始，而我不会显示它们。

希望我说得足够清楚

编辑: 在“测试”组件的 render() 函数中有这个 div，其中“main-content”是 flex，前两个 div 在第一行，每个有 50%宽度，第三个内部 div 位于第二行，宽度为 100%。

<div className="main-content">
    <div className="content-box admin-setting-container">
    </div>

    <div className="content-box change-password-container">
    </div>

    <div className="content-box organization-setting-container">
    </div>
</div>

在 .css 文件中我有这段代码:

@media only screen and (max-width: 1000px) {
    .change-password-container, .organization-setting-container {
        animation: fadeDown 0.5s ease-out;
    }
}

@keyframes fadeDown {
    0% {
        opacity: 0.01;
        transform: translateX(-25%);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

因此，当窗口的宽度变为 <1000 时，我将有三行，每行对应内部 div。它有效，但问题是，如果我在页面宽度已经 <1000 时打开页面，动画仍会执行，即使我会阻止它们。

我尝试过的一件事是让 div“main-content”带有一个特殊的类“preload”，然后在组件挂载后删除该类。 CSS 类预加载会阻止动画。让我向您展示代码。

/* IN REACT COMPONENT FILE */
componentDidMount() {
    document.getElementsByClassName("preload")[0].classList.remove("preload");
}
... <div className="main-content preload"> ... </div> ...

/*IN CSS FILE */
.preload * {
     animation-duration: 0s !important;
     -webkit-animation-duration: 0s !important;
 }

Answer 1

好的，现在我明白你在说什么了。问题是您仅在调整大小时尝试设置动画，但每次宽度低于 1000 像素时都会发生媒体查询。

IMO，您应该为调整大小事件添加一个类。我会这样构建它:

  updateWidth() {
    if(window.innerWidth < 1000 && this.state.width > 1000 || window.innerWidth > 1000 && this.state.width < 1000) {
      this.setState({ width window.innerWidth });
    }
  }


  componentDidMount() {
    window.addEventListener("resize", this.updateWidth);
  }

  componentWillUnmount() {
    window.removeEventListener("resize", this.updateWidth);
  }

在组件中，我会检查状态的宽度是否低于 1000 并添加动画类。如果它更大，请删除动画类。不要忘记在构造函数中绑定(bind)事件监听器处理程序。