CSSベースのアニメーションとトランジションを作成することは課題です。それらは複雑で時(shí)間がかかります。完璧な移行を微調(diào)整する時(shí)間がほとんどないプロジェクトを進(jìn)める必要がありますか？すぐに使用できるアニメーションを備えたサードパーティのCSSアニメーションライブラリを検討してください。それでも、あなたは考えているかもしれません：彼らは何ですか？彼らは何を提供しますか？それらを使用するにはどうすればよいですか？

さて、見(jiàn)つけましょう。

（一種の）簡(jiǎn)単な歴史：ホバー

ホバー狀態(tài)の概念が、今日提供されているものの些細(xì)な例であった時(shí)代がありました。実際、要素の上を通過(guò)するカーソルに反応するという考えは、多かれ少なかれ存在していませんでした。この機(jī)能を提供するさまざまな方法が提案され、実裝されました。この小さな機(jī)能は、ある意味で、CSSがページ上の要素のアニメーションが可能であるというアイデアへの扉を開(kāi)きました。時(shí)間が経つにつれて、これらの機(jī)能で可能な複雑さの増加は、CSSアニメーションライブラリにつながりました。

MacRomediaのDreamWeaverは1997年12月に導(dǎo)入され、シンプルな機(jī)能、Hoverの畫(huà)像交換を提供しました。この機(jī)能は、エディターによってHTMLに埋め込まれるJavaScript関數(shù)で実裝されました。この関數(shù)はMM_SWAPIMAGE（）という名前で、Webデザインの民間伝承の少しになりました。 DreamWeaver以外でも使用するのは簡(jiǎn)単なスクリプトであり、人気は今日でも使用されています。この記事の最初の調(diào)査では、 Adobe's DreamWeaver （2005年にAdobeがMacromediaを買(mǎi)収した）に関する2018年のこの機(jī)能に関する質(zhì)問(wèn)を見(jiàn)つけました。

JavaScript関數(shù)は、マウスオーバーおよびマウスアウトイベントに基づいてSRC屬性を変更することにより、畫(huà)像を別の畫(huà)像と交換します。実裝されたとき、それは次のように見(jiàn)えました：

 <a href="%EF%BC%83" onmouseout="mm_swapimgrestore（）" onmouseover="mm_swapimage（ 'imagename'、 ''、 'newimage.jpg'、1）">
  <img  src="originalimage.jpg" name="imagename"    style="max-width:90%"  style="max-width:90%" border="0" alt="サードパーティのアニメーションライブラリをプロジェクトに統(tǒng)合します" >
</a>

今日の基準(zhǔn)では、JavaScriptでこれを達(dá)成するのはかなり簡(jiǎn)単だろうし、私たちの多くは私たちの睡眠中に実際にこれを行うことができます。ただし、JavaScriptは當(dāng)時(shí)この新しいスクリプト言語(yǔ)（1995年に作成）であり、ブラウザからブラウザまで外観と振る舞いが異なっていたことを考えてみましょう。クロスブラウザーJavaScriptを作成することは必ずしも簡(jiǎn)単な作業(yè)ではなく、Webページを作成するすべての人がJavaScriptを書(shū)いたわけではありません。 （それは確かに変更されましたが。）DreamWeaverはエディターのメニューを通じてこの機(jī)能を提供し、WebデザイナーはJavaScriptを書(shū)く必要さえありませんでした。これは、さまざまなオプションのリストから選択できる一連の「行動(dòng)」に基づいていました。これらのオプションは、一連のターゲットブラウザによってフィルタリングできます。 3.0ブラウザ、4.0ブラウザ、IE 3.0、IE 4.0、Netscape 3.0、Netscape 4.0。ああ、古き良き時(shí)代。

DreamWeaverが最初にリリースされてから約1年後、W3CのCSS2仕様は次のように述べています。1998年1月の作業(yè)ドラフトでのホバー。アンカーリンクの観點(diǎn)から特別に言及されましたが、言語(yǔ)は他の要素に適用される可能性があることを示唆しています。ほとんどの目的で、この擬似セレクターは、背景イメージが同じドラフトにあるため、MM_SWAPIMAGE（）の簡(jiǎn)単な代替手段の始まりになると思われます。ブラウザのサポートは、多くのWebデザイナーにとって実行可能なオプションになるために十分なブラウザがCSS2を適切にサポートするまでに何年もかかったため問(wèn)題でしたが。最終的にCSS2.1のW3C推奨がありました。これは、2011年6月に公開(kāi)された「現(xiàn)代」CSSの基礎(chǔ)と見(jiàn)なされる可能性があります。

このすべての中で、 jQueryは2006年に登場(chǎng)しました。ありがたいことに、JQueryはさまざまなブラウザの間でJavaScriptを単純化するのに大いに役立ちました。私たちのストーリーに興味のあることの1つであるJQueryの最初のバージョンは、Animate（）メソッドを提供しました。この方法を使用すると、いつでも任意の要素でCSSプロパティをアニメーション化できます。ホバーだけではありません。この方法では、この方法では、より堅(jiān)牢なCSSソリューションがブラウザに焼き付けられている必要性が明らかになりました。これは、ブラウザの制限のために常にパフォーマンスがあるとは限らないJavaScriptライブラリを必要としないソリューションです。

The：Hover Pseudo-Classは、スムーズな移行をサポートせずに、ある狀態(tài)から別の狀態(tài)へのハードスワップのみを提供しました。また、要素の上にホバリングするのと同じくらい基本的なもの以外の要素の変化をアニメーション化することもできませんでした。 jQueryのAnimate（）メソッドは、これらの機(jī)能を提供しました。それは道を舗裝し、戻ることはありませんでした。 Web開(kāi)発のダイナミックな世界で物事が進(jìn)むにつれて、CSS2.1の推奨が公開(kāi)される前に、これを解決するための作業(yè)ドラフトが順調(diào)に進(jìn)んでいました。 CSS Transitionsモジュールレベル3の最初の作業(yè)ドラフトは、2009年3月にW3Cによって最初に公開(kāi)されました。CSSアニメーションモジュールレベル3の最初の作業(yè)ドラフトは、ほぼ同時(shí)に公開(kāi)されました。これらのCSSモジュールはどちらも2018年10月の時(shí)點(diǎn)でまだ作業(yè)ドラフトステータスにありますが、もちろん、私たちはすでにそれらを多用しています

したがって、単純なホバー狀態(tài)のためだけにサードパーティによって提供されるJavaScript関數(shù)として最初に始まったものは、精巧で複雑なアニメーションを可能にするCSSの移行とアニメーションにつながりました。私たちは一周しました。今日、この複雑さを相殺するために、多くのサードパーティCSSアニメーションライブラリが作成されています。

3つの異なるタイプのサードパーティアニメーションライブラリ

私たちは、ウェブページやアプリで強(qiáng)力でエキサイティングで複雑なアニメーションができるこの新しい世界にいます。これらの新しいタスクにアプローチする方法について、いくつかの異なるアイデアが最前線に來(lái)ました。 1つのアプローチが他のアプローチよりも優(yōu)れているわけではありません。確かに、それぞれにかなりの重複があります。違いは、私たちが彼らのコードを?qū)g裝して書(shū)き込む方法についてです。いくつかは本格的なJavaScriptのみのライブラリであり、他のものはCSSのみのコレクションです。

JavaScriptライブラリ

JavaScriptを通じてのみ動(dòng)作するライブラリは、一般的なCSSアニメーションが提供するものを超えて機(jī)能を提供することがよくあります。通常、ライブラリは実際にエンジンの一部としてCSS機(jī)能を使用する可能性があるため、重複していますが、APIを支持して抽象化されます。このようなライブラリの例は、GreensockとAnime.jsです。彼らが提供するデモを見(jiàn)ることで、彼らが提供するものの範(fàn)囲を見(jiàn)ることができます（GreensockにはCodepenで素晴らしいコレクションがあります）。主に非常に複雑なアニメーションを目的としていますが、より基本的なアニメーションにも役立ちます。

JavaScriptおよびCSSライブラリ

主にCSSクラスを含むが、プロジェクトでクラスを簡(jiǎn)単に使用できるJavaScriptを提供するサードパーティライブラリがあります。 1つのライブラリ、Micron.jsは、要素で使用できるJavaScript APIとデータ屬性の両方を提供します。このタイプのライブラリを使用すると、選択できる事前に構(gòu)築されたアニメーションを簡(jiǎn)単に使用できます。別のライブラリであるMotion UIは、JavaScriptフレームワークで使用することを目的としています。ただし、JavaScript APIの混合、事前に構(gòu)築されたクラス、およびデータ屬性の同様の概念にも機(jī)能します。これらのタイプのライブラリは、事前に構(gòu)築されたアニメーションと、それらを配線する簡(jiǎn)単な方法を提供します。

CSSライブラリ

3番目のライブラリはCSSのみです。通常、これはHTMLのリンクタグを介してロードするCSSファイルにすぎません。次に、特定のCSSクラスを適用して削除して、提供されたアニメーションを利用します。このタイプのライブラリの2つの例は、animate.cssとanimistaです。とはいえ、これら2つの特定のライブラリには大きな違いさえあります。 Animate.cssは合計(jì)CSSパッケージですが、Animistaは、提供されたコードで必要なアニメーションを選択するための滑らかなインターフェイスを提供します。これらのライブラリは多くの場(chǎng)合簡(jiǎn)単に実裝できますが、それらを使用するためにコードを作成する必要があります。これらは、この記事が焦點(diǎn)を當(dāng)てるライブラリのタイプです。

3つの異なるタイプのCSSアニメーション

はい、パターンがあります。結(jié)局のところ、3つのルールはどこにでもあります。

ほとんどの場(chǎng)合、サードパーティライブラリを使用する際に考慮すべきアニメーションには3つのタイプがあります。各タイプは異なる目的に適しており、それらを利用するさまざまな方法があります。

ホバーアニメーション

これらのアニメーションは、ある種のホバー狀態(tài)に関與することを目的としています。それらはしばしばボタンで使用されますが、別の可能性はそれらを使用して、カーソルがたまたまオンになっているセクションを強(qiáng)調(diào)表示することです。また、フォーカス?fàn)顟B(tài)に使用することもできます。

注意アニメーション

これらのアニメーションは、通常、ページを表示する人の視覚的中心の外側(cè)にある要素で使用することを目的としています。アニメーションは、注意が必要なディスプレイのセクションに適用されます。このようなアニメーションは、最終的に注意を必要とするが、自然に悲慘ではないものにとって、本質(zhì)的に微妙なものになる可能性があります。また、すぐに注意が必要なときに非常に気を散らすこともできます。

トランジションアニメーション

これらのアニメーションは、多くの場(chǎng)合、ビューで別の要素を交換する要素を使用することを目的としていますが、1つの要素にも使用できます。これらには、通常、ビューを「殘す」ためのアニメーションが含まれ、ビューを「入力」するためのアニメーションをミラーします。フェードアウトしてフェードインすることを考えてください。これは、たとえば、データのあるセクションが別のデータセットに移行するため、シングルページアプリで一般的に必要です。

それでは、これらのタイプのそれぞれのアニメーションの例と、それらをどのように使用するかについて説明しましょう。

ホバリングしましょう！

一部のライブラリはすでにホバーエフェクトに設(shè)定されている場(chǎng)合がありますが、一部のライブラリは主な目的としてホバー狀態(tài)を持っています。そのようなライブラリの1つはhover.cssです。これは、クラス名を介して適用される優(yōu)れたホバーエフェクトを提供するドロップインソリューションです。ただし、グローバルなスタイルと矛盾する可能性があるため、Hover Pseudo Classを直接サポートしないライブラリのアニメーションを使用したい場(chǎng)合があります。

この例では、Animate.cssが提供するTADAアニメーションを使用します。それは注意の探求者としてより多く意図されていますが、この例ではうまくいきます。ライブラリのCSSを調(diào)べると、Hover Pseudo-Classが見(jiàn)つかりません。ですから、私たちはそれを自分でそのように機(jī)能させる必要があります。

Tadaクラス自體はこれだけです：

 .tada {
  アニメーション名：TADA;
}

ホバー狀態(tài)にこれを反応させるための低リフトアプローチは、クラスの獨(dú)自のローカルコピーを作成することですが、少し拡張することです。通常、Animate.CSSはドロップインソリューションであるため、元のCSSファイルを編集するオプションが必ずしもあるわけではありません。ご希望に応じて、ファイルの獨(dú)自のローカルコピーを作成できます。したがって、必要なコードのみを作成し、ライブラリが殘りを処理できるようにします。

 .tada-hover：ホバー{
  アニメーション名：TADA;
}

実際に他の場(chǎng)所で使用したい場(chǎng)合に備えて、元のクラス名を無(wú)効にするべきではないでしょう。したがって、代わりに、セレクターにHover Pseudo-Classを配置できるバリエーションを作成します。これで、カスタムTada-Hoverクラスとともに、ライブラリの必要なアニメーションクラスを要素に使用するだけで、Hoverでそのアニメーションを再生します。

この方法でカスタムクラスを作成したくないが、代わりにJavaScriptソリューションを好む場(chǎng)合は、それを処理する比較的簡(jiǎn)単な方法があります。奇妙なことに、これは前述のDreamWeaverのMM_IMAGESWAP（）メソッドと同様の方法です。

 // ID #js_exampleで要素を選択しましょう
var js_example = document.queryselector（ '＃js_example'）;

// ID #js_exampleを持つ要素がホバリングされている場(chǎng)合...
js_example.addeventlistener（ 'mouseover'、function（）{
  // ...要素に2つのクラスを追加しましょう：アニメーションとTADA ...
  this.classlist.add（ 'animated'、 'tada'）;
}）;
// ...次に、マウスが要素上にない場(chǎng)合は、これらのクラスを削除します。
js_example.addeventlistener（ 'mouseout'、function（）{
  this.classList.Remove（ 'Animated'、 'tada'）;
}）;

コンテキストに応じて、実際にこれを処理する方法は複數(shù)あります。ここでは、マウスオーバーとマウスアウトイベントを待つために、イベントリスナーを作成します。次に、これらのリスナーは、必要に応じてライブラリのアニメ化されたTADAクラスを適用して削除します。ご覧のとおり、サードパーティライブラリを少し拡張して、私たちのニーズに合わせて比較的簡(jiǎn)単に達(dá)成できます。

ご注意ください。

サードパーティのライブラリが支援できる別のタイプのアニメーションは注意を求める人です。これらのアニメーションは、ページの要素またはセクションに注意を向けたい場(chǎng)合に役立ちます。これのいくつかの例は、通知または必要なフォーム入力を妨げている可能性があります。これらのアニメーションは、微妙または直接的なものにすることができます。何かが最終的に注意を必要としているが、すぐに解決する必要はない場(chǎng)合に微妙です。何かが解決が必要なときに直接。

一部のライブラリには、パッケージ全體の一部などのアニメーションがあり、一部はこの目的のために特別に構(gòu)築されています。 Animate.cssとanimistaの両方にアニメーションを求める注意がありますが、それらはそれらのライブラリの主な目的ではありません。この目的のために構(gòu)築されたライブラリの例は、CSShakeです。使用するライブラリは、プロジェクトのニーズと、それらの実裝に投資したい時(shí)間に依存します。たとえば、CSShakeはあなたの側(cè)でほとんどトラブルを起こさずに行く準(zhǔn)備ができています。必要に応じてクラスを適用するだけです。ただし、Animate.cssなどのライブラリを既に使用している場(chǎng)合は、2番目のライブラリを?qū)毪筏郡胜た赡苄预ⅳ辘蓼梗ē靴榨┅`マンス、依存関係など）。

したがって、animate.cssなどのライブラリを使用できますが、もう少しセットアップする必要があります。図書(shū)館のGitHubページには、これを行う方法の例があります。プロジェクトのニーズに応じて、これらのアニメーションを注意を求める人として実裝することはかなり簡(jiǎn)単です。

微妙なタイプのアニメーションの場(chǎng)合、セット數(shù)を繰り返して停止するアニメーションを使用できます。これには通常、ライブラリのクラスを追加し、Animation IterationプロパティをCSSに適用し、アニメーションエンドイベントがライブラリのクラスをクリアするのを待つことが含まれます。

Hover Statesについて以前に検討したのと同じパターンに従う簡(jiǎn)単な例を次に示します。

 var pulse = document.queryselector（ '＃pulse'）;

function playpulse（）{
  pulse.classlist.add（ 'animated'、 'pulse'）;
}

pulse.addeventlistener（ 'AnimationEnd'、function（）{
  pulse.classlist.Remove（ 'Animated'、 'pulse'）;
}）;

playpulse（）;

ライブラリクラスは、PlayPulse関數(shù)が呼び出されると適用されます。ライブラリのクラスを削除するアニメーションイベントのイベントリスナーがあります。通常、これは一度だけプレイしますが、停止する前に複數(shù)回繰り返すことをお?jiǎng)幛幛筏蓼埂?Animate.cssはこれにクラスを提供しませんが、これを処理するために要素にCSSプロパティを適用するのは簡(jiǎn)単です。

 ＃脈 {
  Animation-Iteration-Count：3; / * 3回後に停止 */
}

このようにして、アニメーションは停止する前に3回再生されます。アニメーションをより早く停止する必要がある場(chǎng)合は、AnimationEnd関數(shù)以外のライブラリクラスを手動(dòng)で削除できます。図書(shū)館のドキュメントは、実際には、アニメーション後に削除するクラスを適用するための再利用可能な機(jī)能の例を提供します。上記のコードと非常によく似ています。反復(fù)カウントを要素に適用するために、それを拡張するのはかなり簡(jiǎn)単です。

より直接的なアプローチのために、何らかの種類のユーザーインタラクションが行われるまで止まらない無(wú)限のアニメーションを例にしましょう。要素をクリックすることがアニメーションを開(kāi)始し、もう一度クリックすることが停止するものであるふりをしましょう。ただし、アニメーションを開(kāi)始して停止したいのはあなた次第です。

 var bounce = document.queryselector（ '＃bounce'）;

bounce.addeventlistener（ 'click'、function（）{
  if（！bounce.classlist.contains（ 'animated'））{
    bounce.classlist.add（ 'animated'、 'bounce'、 'infinite'）;
  } それ以外 {
    bounce.classlist.remove（ 'animated'、 'bounce'、 'infinite'）;
  }
}）;

簡(jiǎn)単です。ライブラリの「アニメーション化された」クラスが適用されている場(chǎng)合、要素テストをクリックします。そうでない場(chǎng)合は、ライブラリクラスを適用して、アニメーションを開(kāi)始します。クラスがある場(chǎng)合は、アニメーションを停止するためにそれらを削除します。クラスリストの端にある無(wú)限のクラスに注意してください。ありがたいことに、Animate.cssはこれをすぐに提供しています。選択したライブラリがそのようなクラスを提供していない場(chǎng)合、これはCSSで必要なものです。

 #bounce {
  Animation-Iteration-Count：Infinite;
}

このコードがどのように動(dòng)作するかを示すデモは次のとおりです。

邪魔にならないものを動(dòng)かす

この記事を調(diào)査するとき、私は（CSS遷移と混同しないでください）遷移は、サードパーティライブラリで最も一般的なタイプのアニメーションであることがわかりました。これらは、要素がページを入力または離れることを可能にするために構(gòu)築されたシンプルなアニメーションです。最新のシングルページアプリケーションで見(jiàn)られる非常に一般的なパターンは、1つの要素にページを離れることで、別の要素がページに入力して置き換えることです。最初の要素がフェードアウトし、2番目のフェードインが入っていると考えてください。これは、古いデータを新しいデータに置き換えたり、シーケンスで次のパネルに移動(dòng)したり、あるページからルーターで別のページに移動(dòng)したりする可能性があります。 Sarah DrasnerとGeorgy Marchukの両方に、これらのタイプの移行の優(yōu)れた例があります。

ほとんどの場(chǎng)合、アニメーションライブラリは、トランジションアニメーション中に要素を削除および追加する手段を提供しません。追加のJavaScriptを提供するライブラリは実際にこの機(jī)能を持っている可能性がありますが、ほとんどがそうではないため、この機(jī)能を現(xiàn)在処理する方法について説明します。

単一の要素を挿入します

この例では、再びAnimate.cssをライブラリとして使用します。この場(chǎng)合、Fadeindownアニメーションを使用します。

さて、要素をDOMに挿入することを処理する多くの方法があり、ここでそれらをカバーしたくないことに留意してください。アニメーションを活用して、単に視界に飛び込む要素よりも挿入をより良く、より自然にする方法を示しています。 Animate.css（およびおそらく他の多くのライブラリ）の場(chǎng)合、アニメーションに要素を挿入するのは非常に簡(jiǎn)単です。

 let insertelement = document.createelement（ 'div'）;
insertElement.innertext = 'このdivが挿入されています';
insertElement.classlist.add（ 'animated'、 'fadeindown'）;

InsertElement.AddeventListener（ 'AnimationEnd'、function（）{
  this.classList.Remove（ 'Animated'、 'Fadeindown'）;
}）;

document.body.append（insertelement）;

ただし、要素を作成することは問(wèn)題ではありません。要素を挿入する前に、必要なクラスがすでに適用されていることを確認(rèn)する必要があります。その後、うまくアニメーション化されます。また、クラスを削除するAnimationEndイベントのイベントリスナーも含めました。いつものように、これを行うにはいくつかの方法があり、これはおそらくそれを処理する最も直接的な方法です。クラスを削除する理由は、必要に応じてプロセスを簡(jiǎn)単に逆転させることです。エントリーアニメーションが離れるアニメーションと競(jìng)合することを望まないでしょう。

単一の要素を削除します

単一の要素を削除することは、要素を挿入するのに似ています。要素はすでに存在するため、目的のアニメーションクラスを適用するだけです。次に、AnimationEndイベントで、要素をDOMから削除します。この例では、Animate.cssのFadeOutdownアニメーションを使用します。FadeintownownAnimationとうまく機(jī)能するためです。

 removeElement = document.queryselector（ '＃remofelement'）;

removeElement.addeventListener（ 'AnimationEnd'、function（）{
  this.remove（）;
}）;

removeElement.classlist.add（ 'animated'、 'fadeoutdown'）;

ご覧のとおり、要素をターゲットにし、クラスを追加し、アニメーションの最後にある要素を削除します。

このすべての問(wèn)題は、この方法で要素を挿入して削除することで、ページ上の他の要素がジャンプして調(diào)整することです。何らかの形で、おそらくCSSと要素の一定のスペースを維持するためにページのレイアウトで説明する必要があります。

私の邪魔にならない、私は通り抜けています！

次に、2つの要素を交換します。1つは出発し、別の要素が入ります。これを処理する方法はいくつかありますが、以前の2つの例を本質(zhì)的に組み合わせた例を提供します。

JavaScriptを部分的に調(diào)べて、それがどのように機(jī)能するかを説明します。まず、2つの要素のボタンとコンテナへの參照をキャッシュします。次に、コンテナ內(nèi)に交換される2つのボックスを作成します。

 let button = document.queryselector（ 'button'）;
container = document.queryselector（ '。container'）;
let box1 = document.createelement（ 'div'）;
box2 = document.createelement（ 'div'）;

各AnimationEndイベントのアニメーションクラスを削除するための一般的な関數(shù)があります。

 removeclasses = function（）{
  box1.classlist.remove（ 'animated'、 'fadeoutright'、 'fadeinleft'）;
  box2.classlist.remove（ 'animated'、 'fadeoutright'、 'fadeinleft'）;
}

次の関數(shù)は、スワッピング機(jī)能の大部分です。最初に、表示されている現(xiàn)在のボックスを決定します。それに基づいて、私たちは去る要素と入力を推測(cè)することができます。離れる要素は、スイッチエレメント関數(shù)を最初に削除したイベントリスナーを取得します。次に、アニメーションが終了したため、コンテナから離れる要素を削除します。次に、入力要素にアニメーションクラスを追加し、コンテナに追加して、所定の位置にアニメーション化します。

 let switchElements = function（）{
  let currentElement = document.querySelector（ '。container .box'）;
  letelement = currentelement.classlist.contains（ 'box1'）？ box1：box2;
  EnterElement = leavelement === box1としますか？ Box2：Box1;
  
  leavelement.RemoveEventListener（ 'AnimationEnd'、switchElements）;
  leavelement.remove（）;
  EnterElement.classlist.add（ 'Animated'、 'fadeinleft'）;
  container.append（enterlement）;
}

2つのボックスの一般的なセットアップを行う必要があります。さらに、最初のボックスをコンテナに追加します。

 box1.classlist.add（ 'box'、 'box1'）;
box1.addeventlistener（ 'AnimationEnd'、RemoveClasses）;
box2.classlist.add（ 'box'、 'box2'）;
box2.addeventlistener（ 'AnimationEnd'、RemoveClasses）;

container.appendChild（box1）;

最後に、ボタンのクリックイベントリスナーがあり、切り替えを行います。これらの一連のイベントがどのように開(kāi)始されるかは、技術(shù)的にはあなた次第です。この例では、簡(jiǎn)単なボタンクリックを決定しました?，F(xiàn)在どのボックスが表示されているかを把握しています。これは、アニメーション化するために適切なクラスを適用するために出発します。次に、実際のスワップを処理する上記のスイッチエレメント関數(shù)を呼び出すAnimationEndイベントにイベントリスナーを適用します。

 button.addeventlistener（ 'click'、function（）{
  let currentElement = document.querySelector（ '。container .box'）;
  
  if（currentelement.classlist.contains（ 'box1'））{
    box1.classlist.add（ 'animated'、 'fadeoutright'）;
    box1.addeventlistener（ 'AnimationEnd'、switchElements）;
  } それ以外 {
    box2.classlist.add（ 'animated'、 'fadeoutright'）;
    box2.addeventlistener（ 'AnimationEnd'、switchElements）;
  }
}

この例で明らかな問(wèn)題の1つは、この1つの狀況で非常にハードコーディングされていることです。ただし、さまざまな狀況に合わせて簡(jiǎn)単に拡張および調(diào)整できます。そのため、この例は、そのようなタスクを処理する1つの方法を理解することに役立ちます。ありがたいことに、MotionUIのような一部のアニメーションライブラリは、要素の遷移を助けるためにいくつかのJavaScriptを提供します?？紤]すべきもう1つのことは、VUEJSなどのJavaScriptフレームワークには、要素の遷移のアニメーションを支援する機(jī)能があることです。

また、より柔軟なシステムを提供する別の例を作成しました。これは、データ屬性を備えたアニメーションを殘して入力するための參照を保存するコンテナで構(gòu)成されています。コンテナには、コマンドの場(chǎng)所を切り替える2つの要素があります。この例の構(gòu)築方法は、JavaScriptを介してデータ屬性でアニメーションが簡(jiǎn)単に変更されることです。デモに2つのコンテナもあります。 1つはAnimate.cssを使用し、もう1つはアニメーションにAnimistaを使用しています。これは大きな例なので、ここではコードを調(diào)べません。しかし、それは非常にコメントされているので、興味があるかどうかを見(jiàn)てください。

考えてみてください…

誰(shuí)もが実際にこれらすべてのアニメーションを見(jiàn)たいですか？一部の人々は、私たちのアニメーションがオーバーザトップで不要であると考えることができますが、一部の人にとっては、実際に問(wèn)題を引き起こす可能性があります。しばらく前に、WebKitは、前庭スペクトラム障害の可能性のある問(wèn)題を支援するために、好ましい還元モーションメディアクエリを?qū)毪筏蓼筏?。エリッ?ベイリーは、メディアクエリへの素晴らしい紹介と、ベストプラクティスに関する考慮事項(xiàng)を伴うフォローアップも投稿しました。間違いなくこれらを読んでください。

それで、あなたの選択のアニメーションライブラリは好まれた還元運(yùn)動(dòng)をサポートしていますか？ドキュメントがそれがそうであると言っていない場(chǎng)合、あなたはそれがそうではないと仮定する必要があるかもしれません。ただし、ライブラリのコードをチェックして、メディアクエリに何かがあるかどうかを確認(rèn)するのは簡(jiǎn)単です。たとえば、Animate.cssは_base.scss部分ファイルにあります。

 @media（print）、（recreter-reduced-motion）{
  .Animated {
    アニメーション：控えめです！重要。
    移行：なし！重要。
  }
}

このコードは、図書(shū)館がそれをサポートしていない場(chǎng)合、自分でこれを行う方法の優(yōu)れた例を提供します。ライブラリに使用される共通のクラスがある場(chǎng)合（Animate.cssが「アニメーション」を使用するなど）がある場(chǎng)合、そのクラスをターゲットにすることができます。そのようなクラスをサポートしていない場(chǎng)合は、実際のアニメーションクラスをターゲットにするか、その目的のために獨(dú)自のカスタムクラスを作成する必要があります。

 。スケールアップセンター{
  アニメーション：スケールアップセンター0.4Sキュービックベジエ（0.390、0.575、0.565、1.000）の両方。
}

@KeyFrames Scale-UpCenter {
  0％{変換：スケール（0.5）; }
  100％{変換：スケール（1）; }
}

@media（print）、（recreter-reduced-motion）{
  。スケールアップセンター{
    アニメーション：控えめです！重要。
    移行：なし！重要。
  }
}

ご覧のとおり、Animate.cssが提供する例を使用して、AnimistaのAnimationクラスをターゲットにしました。ライブラリから使用することを選択したすべてのアニメーションクラスについて、これを繰り返す必要があることに注意してください。しかし、エリックのフォローアップ作品では、すべてのアニメーションをプログレッシブエンハンスメントとして扱うことを提案しており、それがコードを削減し、よりアクセスしやすいユーザーエクスペリエンスを作成する1つの方法です。

フレームワークにあなたのために重い持ち上げをさせてください

多くの點(diǎn)で、ReactやVueなどのさまざまなフレームワークは、バニラJavaScriptよりもサードパーティのCSSアニメーションを使用して簡(jiǎn)単にすることができます。フレームワークがすでに提供する機(jī)能を活用できます。フレームワークを使用することの美しさは、プロジェクトのニーズに応じて、これらのアニメーションを処理するいくつかの異なる方法も提供することです。以下の例は、オプションの小さな例にすぎません。

ホバーエフェクト

ホバー効果については、より良い方法としてCSS（上記で提案したように）を設(shè)定することをお?jiǎng)幛幛筏蓼埂?VueなどのフレームワークでJavaScriptソリューションが本當(dāng)に必要な場(chǎng)合は、次のようなものになります。

 <button event>
  田田
</button>

方法：{
  オーバー：function（e、type）{
    e.target.classlist.add（ 'Animated'、type）;
  }、
  leave：function（e、type）{
    e.target.classlist.remove（ 'animated'、type）;
  }
}

上記のバニラJavaScriptソリューションとはそれほど違いはありません。また、前と同様に、これを処理する方法はたくさんあります。

注意を求める人

注意を求める人のセットアップは、実際にはさらに簡(jiǎn)単です。この場(chǎng)合、私たちは、vueを例として使用して、必要なクラスを適用するだけです。

 <div> pulse </div>

<div>バウンス</div>

パルスの例では、ブールイスプルスが真である場(chǎng)合はいつでも、2つのクラスが適用されます。バウンスの例では、ブールのイスバウンスが真である場(chǎng)合はいつでも、アニメーション化されたクラスとバウンスクラスが適用されます。 Isbounce BooleanがF(xiàn)alseに戻るまで、終わりのないバウンスを持つことができるように、無(wú)限のクラスが適用されます。

遷移

ありがたいことに、Vueのトランジションコンポーネントは、カスタムトランジションクラスでサードパーティのアニメーションクラスを簡(jiǎn)単に使用する簡(jiǎn)単な方法を提供します。 Reactなどの他のライブラリは、同様の機(jī)能やアドオンを提供できます。 VUEでアニメーションクラスを使用するために、遷移コンポーネントにそれらを?qū)g裝するだけです。

 
  <div v-if="トグル" key="if"> if example </div>
  <div v-else key="else">他の例</div>

Animate.cssを使用して、必要なクラスを適用するだけです。 Enter-Activeの場(chǎng)合、必要なアニメーションクラスとFadeIndownを適用します。 Leave-activeのために、必要なアニメーションクラスとフェードアウトダウンを適用します。遷移シーケンス中に、これらのクラスは適切な時(shí)間に挿入されます。 Vueは、クラスの挿入と削除を処理します。

JavaScriptフレームワークでサードパーティのアニメーションライブラリを使用するより複雑な例については、このプロジェクトをご覧ください。

パーティーに參加してください！

これは、多くのサードパーティのCSSアニメーションライブラリがたくさんあるため、プロジェクトを待っている可能性の小さな味です。徹底的な、偏心、具體的、不快な、または単純なものもあります。 GreensockやAnime.jsなどの複雑なJavaScriptアニメーションのライブラリがあります。要素內(nèi)の文字をターゲットにするライブラリもあります。

うまくいけば、これらすべてが、獨(dú)自のCSSアニメーションを作成する途中でこれらのライブラリで遊ぶように促すことを願(yuàn)っています。

以上がサードパーティのアニメーションライブラリをプロジェクトに統(tǒng)合しますの詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國(guó)語(yǔ) Web サイトの他の関連記事を參照してください。