web-dev-qa-db-ja.com

ロード時にアニメーション要素を非表示にする方法は？

ランディングページで animate.css と waypoints.js を使用しています。ユーザーがページをスクロールしたときに要素をアニメーション化したい。しかし、問題は、アニメーションを開始する前に要素を非表示にする必要があることです（非表示にしない場合、animate.cssは最初に要素を非表示にしてからアニメーション化します。これはかなり見苦しいです）。

しかし、cssに2つのクラスを追加することで問題を解決しましたが、別の問題が発生します。

.visible{ opacity: 1; }
.invisible {opacity: 0; }
// I added following jquery code 
$('elem').removeClass('invisible').addClass('visible fadeInUp');

これは、要素にanimation-delayを追加するまではうまく機能します。これが私が達成したいことの説明です。私はこのような要素を持っています：

<ul>
 <li>element1</li>
 <li>element2</li>
 <li>element3</li>
</ul>

各要素にアニメーション遅延を追加して、animation-delayプロパティを使用して、各要素で指定された秒数で次々にfadeInUpになるようにします。これを機能させることができません。アニメーション遅延を使用せずに次のコードを試しましたが、成功しませんでした。

$('elem').each(function() {
  // code with delay using timeout
  setTimeout(function(){
   $(this).removeClass('invisible').addClass('...');
  }, 100);
});

私のアプローチが完全に間違っているかどうか教えてください。はいの場合、達成するためのより良い方法を提供できますか。

jqueryjquery-waypointsanimate.css
12
Ejaz Karim

あなたはCSSだけでそれを行うことができます。

タイトルをアニメーション化しようとしているとしましょう。要素のクラスにこのcssを与えます：

.title { visibility: hidden; }

そして、アニメーション化されたクラス（animate.cssからのもの）にこのcssを与えます：

.animated { visibility: visible !important; }

ウェイポイントビューに到達すると、animate.cssのコードごとに.animatedが追加され、アニメーションで表示されます。

27
user3319362

使用を避ける !importantクラスをスタックすることによって：

.hidden-load {visibility: hidden;}
.hidden-load.animated {visibility: visible;}
11
isherwood

これは不透明度で行うことができます。影響を与えるdiv要素に空白のクラスを追加します。 jqueryがアニメーション化されたクラスをウェイポイントでアタッチすると、不透明度を使用してクラスを復活させることができます：1。

.to-be-animated {
  opacity: 0;
}

.to-be-animated.animated {
  opacity: 1;
}
1
PattyCreates