基本的に、アニメーション付きのコンポーネントがありますが、ユーザーが特定のブレークポイントでページのサイズを変更した場合にのみ表示したいと思います（幅が800px未満の場合は、divを再配置します。その場合は、アニメーション）。
私はなんとかそれを行うことができますが、問題は、最初にページをロードしたときに、アニメーションが表示されないときにアニメーションが開始されることです。
私が十分に明確になったことを願っています
編集：このdivを「Test」コンポーネントのrender（）関数に入れます。「main-content」はflexで、最初の2つのdivはそれぞれ幅の50％の最初の行にあり、3番目の内部divは幅100％の2行目。
<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ごとに1つずつ、合計3つの行が作成されます。それは機能しますが、問題は、幅がすでに1000未満のときにページを開くと、それを阻止したとしても、アニメーションが引き続き実行されることです。
私が試した1つのことは、div'main-content 'に特別なクラス' preload 'を設定し、コンポーネントがMountになったらそのクラスを削除することでした。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;
}
さて、あなたが何を話しているのかわかりました。サイズを変更しているときにのみアニメーション化しようとしていますが、幅が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クラスを追加します。大きい場合は、animateクラスを削除します。コンストラクターでイベントリスナーハンドラーをバインドすることを忘れないでください。
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加