ホームページ > 記事 > ウェブフロントエンド > JSでのチェーンの動き（詳細チュートリアル）

JSでのチェーンの動き（詳細チュートリアル）

この記事では、主に JS モーション特殊効果のチェーンモーションを紹介し、JavaScript チェーンモーションの原理と具体的な実装テクニックをサンプルの形式で分析します。必要な友達は参考にしてください。

この記事では、JS モーションのチェーンモーションについて説明します。特殊効果と例。参考のために皆さんと共有してください。詳細は次のとおりです。

前の記事「JS モーションエフェクトに任意の値のモーションを追加する方法」に従って、引き続き

チェーンモーションを投げます。一つ一つの動き。たとえば、マウスを p に移動すると、まず幅が拡大され、次に高さが拡大され、次に透明度が変更されるなど、一連の動きが連続して実行されます。早速、栗の話にいきましょう！！

マウスが p に移動すると、p は最初に幅が広くなり、次に高くなり、外に移動すると 1 つずつ元の状態に戻ります。前の記事の startMove () を変更する必要があります。この関数は引き続き改良されています

function startMove(obj,attr,iTarget,fn) をもう 1 つ渡します startMove() 函数继续做改进

function startMove(obj,attr,iTarget,fn) fnパラメータは、動作が終了したら、次の動作を継続することを意味します、次の動作があれば、次の動作を実行し、そうでない場合は、下方向に実行し続けます。完全なテストコード:

HTML 部分:

if(fn){
  fn();
}

css 部分:

<body>
<p id="p1"></p>
</body>

js 部分:

<style>
  #p1{
   width: 200px;height: 200px;
   background: green;
  }
</style>

上記は、将来皆さんに役立つことを願っています。

vue-cliプロジェクトにおけるProxyTableのクロスドメインの問題

expressでクエリサーバーを構築する

jsのカスタムトリム関数を使用して両端のスペースを削除する

JavaScriptの動作原理

jest を使用してネイティブコンポーネントに反応するテストの詳細な説明

以上がJSでのチェーンの動き（詳細チュートリアル）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

続きを見る