Question

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

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

希望我已经足够清楚了

编辑：在'Test'组件的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

好的，现在我看到你正在谈论的内容。问题是，您只是在调整大小时尝试制作动画，但每次宽度低于1000px时都会进行媒体查询。

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并添加animate类。如果它更大，请删除动画类。别忘了在构造函数中绑定事件监听器处理程序。

Answer 2

你有一个代码spinet吗？听起来像是在“componentDidMount”上发生了一些事情，你可以尝试以下内容。

componentDidMount = (e) => {
e.preventDefault();
}

加载React组件时阻止动画

2 个答案: