サードパーティのアニメーションライブラリをプロジェクトに統合します

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

さて、見つけましょう。

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

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

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

JavaScript関数は、マウスオーバーおよびマウスアウトイベントに基づいて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="サードパーティのアニメーションライブラリをプロジェクトに統合します" >
</a>

今日の基準では、JavaScriptでこれを達成するのはかなり簡単だろうし、私たちの多くは私たちの睡眠中に実際にこれを行うことができます。ただし、JavaScriptは当時この新しいスクリプト言語（1995年に作成）であり、ブラウザからブラウザまで外観と振る舞いが異なっていたことを考えてみましょう。クロスブラウザーJavaScriptを作成することは必ずしも簡単な作業ではなく、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月の作業ドラフトでのホバー。アンカーリンクの観点から特別に言及されましたが、言語は他の要素に適用される可能性があることを示唆しています。ほとんどの目的で、この擬似セレクターは、背景イメージが同じドラフトにあるため、MM_SWAPIMAGE（）の簡単な代替手段の始まりになると思われます。ブラウザのサポートは、多くのWebデザイナーにとって実行可能なオプションになるために十分なブラウザがCSS2を適切にサポートするまでに何年もかかったため問題でしたが。最終的にCSS2.1のW3C推奨がありました。これは、2011年6月に公開された「現代」CSSの基礎と見なされる可能性があります。

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

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

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

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

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

JavaScriptライブラリ

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

JavaScriptおよびCSSライブラリ

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

CSSライブラリ

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

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

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

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

ホバーアニメーション

これらのアニメーションは、ある種のホバー状態に関与することを目的としています。それらはしばしばボタンで使用されますが、別の可能性はそれらを使用して、カーソルがたまたまオンになっているセクションを強調表示することです。また、フォーカス状態に使用することもできます。

注意アニメーション

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

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

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

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

ホバリングしましょう！

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

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

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

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

ホバー状態にこれを反応させるための低リフトアプローチは、クラスの独自のローカルコピーを作成することですが、少し拡張することです。通常、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'）;
}）;

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

ご注意ください。

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

一部のライブラリには、パッケージ全体の一部などのアニメーションがあり、一部はこの目的のために特別に構築されています。 Animate.cssとanimistaの両方にアニメーションを求める注意がありますが、それらはそれらのライブラリの主な目的ではありません。この目的のために構築されたライブラリの例は、CSShakeです。使用するライブラリは、プロジェクトのニーズと、それらの実装に投資したい時間に依存します。たとえば、CSShakeはあなたの側でほとんどトラブルを起こさずに行く準備ができています。必要に応じてクラスを適用するだけです。ただし、Animate.cssなどのライブラリを既に使用している場合は、2番目のライブラリを導入したくない可能性があります（パフォーマンス、依存関係など）。

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

微妙なタイプのアニメーションの場合、セット数を繰り返して停止するアニメーションを使用できます。これには通常、ライブラリのクラスを追加し、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関数が呼び出されると適用されます。ライブラリのクラスを削除するアニメーションイベントのイベントリスナーがあります。通常、これは一度だけプレイしますが、停止する前に複数回繰り返すことをお勧めします。 Animate.cssはこれにクラスを提供しませんが、これを処理するために要素にCSSプロパティを適用するのは簡単です。

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

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

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

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

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

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

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

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

単一の要素を挿入します

この例では、再び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）;

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

単一の要素を削除します

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

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

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

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

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

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

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

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

JavaScriptを部分的に調べて、それがどのように機能するかを説明します。まず、2つの要素のボタンとコンテナへの参照をキャッシュします。次に、コンテナ内に交換される2つのボックスを作成します。

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

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

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

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

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

最後に、ボタンのクリックイベントリスナーがあり、切り替えを行います。これらの一連のイベントがどのように開始されるかは、技術的にはあなた次第です。この例では、簡単なボタンクリックを決定しました。現在どのボックスが表示されているかを把握しています。これは、アニメーション化するために適切なクラスを適用するために出発します。次に、実際のスワップを処理する上記のスイッチエレメント関数を呼び出す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つの状況で非常にハードコーディングされていることです。ただし、さまざまな状況に合わせて簡単に拡張および調整できます。そのため、この例は、そのようなタスクを処理する1つの方法を理解することに役立ちます。ありがたいことに、MotionUIのような一部のアニメーションライブラリは、要素の遷移を助けるためにいくつかのJavaScriptを提供します。考慮すべきもう1つのことは、VUEJSなどのJavaScriptフレームワークには、要素の遷移のアニメーションを支援する機能があることです。

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

考えてみてください…

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

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

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

このコードは、図書館がそれをサポートしていない場合、自分でこれを行う方法の優れた例を提供します。ライブラリに使用される共通のクラスがある場合（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（上記で提案したように）を設定することをお勧めします。 VueなどのフレームワークでJavaScriptソリューションが本当に必要な場合は、次のようなものになります。

 <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がFalseに戻るまで、終わりのないバウンスを持つことができるように、無限のクラスが適用されます。

遷移

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

 
  <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アニメーションのライブラリがあります。要素内の文字をターゲットにするライブラリもあります。

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

以上がサードパーティのアニメーションライブラリをプロジェクトに統合しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。