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

Question

基本上，我有一个带有一些动画的组件，但我只想在用户在某个断点调整页面大小时显示它们（如果宽度为

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

希望我已经足够清楚了

编辑： 在“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);
    }
}

这样，当窗口的宽度变为

我尝试过的一件事是让 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 并添加动画类。如果它更大，请删除动画类。 不要忘记在构造函数中绑定事件监听处理程序。

Answer 2

你有代码spinet吗？听起来“componentDidMount”上发生了一些事情，您可以尝试以下操作。

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