CSS アニメーション コールバック_html/css_WEB-ITnose

アニメーションはプロジェクトでよく使用されます。以前は、アニメーションは js で記述され、対象要素のアニメーション効果を実現するには setTimeout 関数または window.requestAnimationFrame() が使用されていました。後者は、更新頻度と移動頻度の同期の問題を解決しますが、dom 上での頻繁な js 操作によって生じる追加のオーバーヘッドと複雑な計算式により、ほとんどの開発者はネイティブ js アニメーションの使用を敬遠し、さまざまなプラグイン アニメーションに頼っています。これは実際には HTML の弱点であり、Web サイトでアニメーションを実行する場合、JS は効果とパフォーマンスの点で Flash よりもはるかに遅れています。そのため、html5 と css3 の標準が登場すると、ほとんどの人が JS の複雑なアニメーションから少し簡単な CSS アニメーションに切り替えるまでに状況が変わりました。 CSS3 は、これまで多大な労力を必要としていた機能を実装するための優れた API を提供します。非常に簡単なコードだけで、誰でもすぐに CSS アニメーションを学ぶことができます。以下は、Y 軸を上下に移動するアニメーションの例です (ここでは Webkit カーネルがデフォルトの標準であり、実際の状況は自分で互換性を持たせる必要があります):

transform:

.mydiv {	width:100px;	height:100px;	background:red;	-webkit-transition: all 2s;}.newClass {	-webkit-transform: translateY(100px)}

animation:

@-webkit-keyframes mymove {	from {top:0px;}	to {top:200px;}}.mydiv {	width:100px;	height:100px;	background:red;	position:relative;	-webkit-animation:mymove 2s forwards; /* Safari and Chrome */}

上記は、CSS アニメーションでよく使用される 2 つの記述方法です。単純なアニメーションの場合は、通常、最初の変換を使用する傾向があります。複雑な変換を行う必要がある場合は、フレームのステータスを別のモーション フレームに書き込むことで、2 番目のアニメーション方法を使用できます。

多くの場合、アニメーションがいつ完了するか、完了後に何をする必要があるかを知る必要があります。つまり、アニメーションの完了にはコールバック関数が必要です。 js アニメーションでは、アニメーション自体は完全に js に依存しており、コールバックは単なる通常の関数であるため、コールバック関数が見つからないことを心配する必要はありません。まず、Luzhui もこの問題を js 思考を使用して考えるのが習慣です。アニメーションの変更時間がわかったので、遅延を使用してロールバックの問題を解決できます。以下は遅延メソッドです。

//css中代码可以看到动画持续2svar delay = 2000;setTimtout(function(){    dosomething()}, delay);

上記のメソッドは理解するのが難しくありません。 このように、遅延の長さはアニメーションの変更になるようです。アニメーション関数が完了するとすぐに実行されます。ただし、このアプローチには多くの重大な欠点があります。まず、setTimeout 関数と CSS アニメーションは必ずしも一致しているわけではありません。アニメーションの開始時間と setTimeout 時間は厳密には一致していないため、関数が早く実行されるか、アニメーションが早く終了します。次に、js コードと css コードが結合されます。遅延時間は常に CSS 内の時間に従う必要があります。CSS コードが変更されるか、JS コードが変更されると、双方が同期の修復 (つまり、一貫した時間への変更) に時間を費やす必要があり、作業負荷が増加します。第三に、複数のアニメーションを使用すると、コード量が増加し、不確実な要素が生じます。各タイマーは個別のアニメーション要素をターゲットとするため、アニメーション要素が増える場合はさらに多くのコードを追加する必要があります。第 4 に、複数のアニメーション要素が同時に終了する状況に対処できません。待って。 。 。 。

上記は発見された欠点のほんの一部であり、複雑なアニメーションには遅延関数はまったく適していません。では、アニメーションのコールバックを処理する方法はあるのでしょうか?答えはもちろん「はい」です。これは非常に簡単で、以前クリック イベントをバインドするのと同じです。 js は css3 で 2 つのアニメーションの終了イベントを提供します。これらを使用して、アニメーションの完了を簡単にキャプチャします。

transitionEnd

document.getElementById('my').addEventListener('transitionEnd', function(){	alert('Transform animation has done!');});

animationend

document.getElementById('my').addEventListener('animationend', function(){	alert('Animation has done!....');});

開発者にとって、これらはまったく馴染みのないものではないことがわかります。使用法と文字通りの名前の両方が一目でわかります。実際、いろいろ言いましたが、このブログは主に 2 つのイベントの名前だけになっています。以下はそれらの互換性効果です。ほとんどのブラウザはこれら 2 つのイベントをサポートします。基本的に、CSS3 アニメーションをサポートするブラウザはこれら 2 つのイベントをサポートします。

もう 1 つ:animationend はアニメーション変更イベントの 1 つにすぎません。他の変化する状態も考えられるはずです。つまり、animationstart、animationiteration です。これら 3 つの状態時間を使用して、変化するアニメーション効果を自由に制御できます。特にアニメーション反復イベントを使用すると、アニメーションの変更プロセスに関与できるようになります。