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

さて、見つけましょう。

（一種の）簡単な歴史：ホバー

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

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

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

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

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

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

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

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

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

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

JavaScriptライブラリ

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

JavaScriptおよびCSSライブラリ

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

CSSライブラリ

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

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

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

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

ホバーアニメーション

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

注意アニメーション

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

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

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

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

ホバリングしましょう！

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

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

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

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

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

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

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

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

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

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

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

ご注意ください。

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

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

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

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

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

 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ù)回繰り返すことをお勧めします。 Animate.cssはこれにクラスを提供しませんが、これを処理するために要素にCSSプロパティを適用するのは簡単です。

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

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

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

 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'）;
  }
}）;

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

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

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

邪魔にならないものを動かす

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

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

単一の要素を挿入します

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

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

 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）;

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

単一の要素を削除します

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

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

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

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

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

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

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

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

JavaScriptを部分的に調(diào)べて、それがどのように機能するかを説明します。まず、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ù)は、スワッピング機能の大部分です。最初に、表示されている現(xiàn)在のボックスを決定します。それに基づいて、私たちは去る要素と入力を推測することができます。離れる要素は、スイッチエレメント関數(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）;

最後に、ボタンのクリックイベントリスナーがあり、切り替えを行います。これらの一連のイベントがどのように開始されるかは、技術(shù)的にはあなた次第です。この例では、簡単なボタンクリックを決定しました?，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）;
  }
}

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

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

考えてみてください…

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

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

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

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

 。スケールアップセンター{
  アニメーション：スケールアップセンター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つの方法です。

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

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

ホバーエフェクト

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

 <button event>
  田田
</button>

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

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

注意を求める人

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

 <div> pulse </div>

<div>バウンス</div>

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

遷移

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

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

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

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

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

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

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

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