バニラ JS エフェクト メソッド

私はこれまで、jQuery をよく使ってきました。jQuery の気に入っている点は、jQuery がシンプルで軽量な構文で便利なメソッドを多数提供していることです。最もよく使用される jQuery メソッドの 1 つは、Web サイトのアニメーション効果を作成するために使用されるエフェクト メソッドです。

例:

• 非表示() / 表示()
• トグル()
• フェードイン()
• フェードアウト()
• ...

W3schools はここにすべての JQuery エフェクト メソッドをリストしました

しかし、現在では大量の JS ライブラリが増加しているため、jQuery は時代遅れになっているようであり、一部のプロジェクトでは、開発者は jQuery コードを純粋な JS に置き換える必要があります。

表示スタイルを編集するだけで、hide() / show() と同じように動作する関数を作成するのは簡単です

element.style.display = 'block' // or none

しかし、fadeIn()/fadeOut() のようなより複雑なエフェクトを使用するには、より多くのコードを記述する必要があります。

バニラ JS でエフェクト メソッドを記述する場合のもう 1 つの問題は、構文が冗長であることです。これは jQuery メソッドで確認できます。

$(".myClass").slideDown();

非常に読みやすく直感的で、jQuery セレクターで要素を見つけて、その要素のメソッドとして slideDown メソッドを呼び出します。
次のように前に slideToggle メソッドを定義すると、コードはバニラ JS で同じ機能を実装します。

const element = document.querySelector(".myClass");
slideToggle(element);

要素をクエリしてから、それを slideToggle() 関数に渡します。jQuery を使用したサンプルよりもネイティブではなく、読みにくく見えます。

ここでの秘訣は、HTMLElement.prototype を使用して HTML 要素にメソッドを追加することです。これにより、HTML 要素のメソッドとしてエフェクト関数を使用できるようになります。簡単にするために、 Hide() メソッドを定義しましょう:

HTMLElement.prototype.hide = function() {
  this.style.display = 'none'
}

document.querySelector(".myClass").hide()

再利用を目的として、ここでエフェクト用のバニラ JS メソッドをいくつか作成しました。コードベースのどこかに配置して、HTML 要素のネイティブ メソッドとして使用するだけです。

以上がバニラ JS エフェクト メソッドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。