ngAnimate プラグインは何をしますか?-H5 チュートリアル-php.cn

ngAnimate プラグインは何をしますか?

アニメーションを定義するには?

ホームページ

ウェブフロントエンド

H5 チュートリアル

ngAnimate プラグインは何をしますか?

零下一度

Jun 30, 2017 pm 03:27 PM

アニメーション

ngAnimate プラグインは何をしますか?

ngAnimate プラグインは、その名前が示すように、要素にアニメーションを提供します。

アニメーションを定義するには?

最初のステップはプラグインを導入することです

<script src="//cdn.bootcss.com/angular.js/1.3.20/angular.js?1.1.11"></script><script src="//cdn.bootcss.com/angular.js/1.3.20/angular-animate.min.js?1.1.11"></script>

ログイン後にコピー

2番目のステップはアプリにこのプラグインを（依存して）導入させることです

<br>

ログイン後にコピー

var appH5=angular.module("app",['ngAnimate']);
appH5.controller("myTabCtrl",['$scope',function($scope){
         $scope.isShow=true;
}])<body ng-controller="myTabCtrl"><input type="checkbox"  ng-model="isShow" /><div class="new-item" ng-if="isShow">我是要动画的元素</div></body>添加动画的第一种方式：通过css3.0的方式

样式定义示例
.new-item{
  padding: 10px;
  border-bottom: 1px solid #ededed;
  font-size: 1.5rem;
  position: relative;
  transition:all 0.5s;
}
/*元素进入页面初始状态*/
.new-item.ng-enter{
  top: 10px;
}
/*进入页面动画后的最终状态*/
.new-item.ng-enter-active{
  top: 0px;
}
/*元素移出页面初始状态*/
.new-item.ng-leave{
  opacity:1;
}
/*移出页面动画后的最终状态*/
.new-item.ng-leave-active{
  opacity:0;
}
//html<div class="new-item">我是要动画的元素</div>

ログイン後にコピー

<br>

ログイン後にコピー

<br>

ログイン後にコピー

なぜスタイルを追加するだけでアニメーションを作成できるのでしょうか? <br>要素がページに入ると、Angular はクラス ng-enter と ng-enter-active を要素に順番に追加します。CSS3.0 が要素のトランジションを定義した後、2 つの属性値が追加されることは誰もが知っていると思います。同一の属性の変化は属性値の変更に使用されます。要素がページから削除されるときも同じことが当てはまります。そのため、要素の 4 つのクラスを定義して、これら 4 つの時点のステータスを定義するだけで済み、残りは Angular に任せます。
この方法でアニメーションを定義することをサポートするコマンドは何ですか? <br>ng-if、ng-view、ng-repeat、ng-include、ng-switch<br>これらの命令は、新しいノードの作成とノードの削除によって要素を表示および非表示にするために使用されます

ng-repeat ポイント

.new-item{
  padding: 10px;
  border-bottom: 1px solid #ededed;
  font-size: 1.5rem;
  position: relative;
  transition:all 0.5s;
}
.new-item.ng-enter{
  top: 10px;
}
.new-item.ng-enter-active{
  top: 0px;
}
.new-item.ng-enter-stagger{/*ng-repeat提供了这个样式，来实现每一个item条目的依次执行某个动画 */
  animation-delay:100ms;
  -webkit-animation-delay:100ms; 
}
.new-item.ng-leave{
  opacity:1;
}
.new-item.ng-leave-active{
  opacity:1;
}
.new-item.ng-leave-stagger{
  animation-delay:100ms;
  -webkit-animation-delay:100ms; 
}
//html<div class="new-item" ng-repeat="new in news">{{new.title}}</div>

ログイン後にコピー

要素の作成と削除によって実装される命令はアニメーション化できると言いましたが、それは要素を表示または非表示にするスタイルを変更するコマンド (ng-show ng-hide ng-class) にすぎません。アニメ化される？

ログイン後にコピー

/*元素隐藏初始状态*/
.new-item.ng-hide-add{
    opacity:1;
}
/*隐藏操作动画后的最终状态*/
.new-item.ng-hide-add-active{
    opacity:0;
}
/*元素显示初始状态*/
.new-item.ng-hide-remove{
    top: 10px;
}
/*显示操作动画后的最终状态*/
.new-item.ng-hide-remove-active{
    top: 0px;
}

ログイン後にコピー

 <br/>

ログイン後にコピー

アニメーションを追加する 2 番目の方法: js を使用する

//ng-if、ng-view、ng-repeat、ng-include、ng-switch 指令
appH5.animation(".new-item",function(){
    return {
        leave:function(element,done){
            //第一个参数是运动的元素，第二个参数是动画完成后的回调，必须调用的，不调用则指令功能不会执行
            $(element).animate({width:0,height:0},1000,done);//借助jQuery
        },
        enter:function(element,done){
            $(element).css({width:100,height:100});//借助jQuery
            $(element).animate({width:100,height:100},1000,done)//借助jQuery
        }
    }
});

//ng-show ng-hide ng-class 指令
appH5.animation(".new-item",function(){
    return {
        addClass:function(element,sClass,done){
            //第一个参数是运动的元素
            //第二个参数是元素的样式-->一般用不上
            //第三个参数是动画完成后的回调，必须调用的，不调用则指令功能不会执行
            $(element).animate({width:0,height:0},1000,done)
        },
        removeClass:function(element,sClass,done){
            $(element).css({width:100,height:100});
            $(element).animate({width:100,height:100},1000,done)
        }
    }
});

ログイン後にコピー

以上がngAnimate プラグインは何をしますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明

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

ホットAIツール

ホットツール

ホットトピック

Gmailメールのログイン入り口はどこですか？

7461

CakePHP チュートリアル

1376

Steamのアカウント名の形式は何ですか

Win11 Activation Key Permanent

NYTの接続はヒントと回答です

Related knowledge

Windows 11 でアニメーション効果を高速化する方法: 2 つの方法を説明 Apr 24, 2023 pm 04:55 PM

Microsoft が Windows 11 を発表したとき、多くの変化がもたらされました。変更点の 1 つは、ユーザーインターフェイスのアニメーションの数が増加したことです。一部のユーザーは表示方法を変更したいと考えており、その方法を見つける必要があります。アニメーションがあると、より快適でユーザーフレンドリーな印象になります。アニメーションは視覚効果を使用して、コンピュータをより魅力的に見せ、応答性を高めます。それらの中には、数秒または数分後にスライドメニューが表示されるものもあります。コンピュータには、PC のパフォーマンスに影響を与え、速度を低下させ、作業を妨げる可能性のあるアニメーションが数多くあります。この場合、アニメーションをオフにする必要があります。この記事では、PC 上でアニメーションの速度を向上させるいくつかの方法を紹介します。レジストリエディターまたは実行するカスタムファイルを使用して変更を適用できます。 Windows 11 でアニメーションを改善する方法

CSS アニメーション: 要素のフラッシュ効果を実現する方法 Nov 21, 2023 am 10:56 AM

CSS アニメーション: 要素のフラッシュ効果を実現する方法、具体的なコード例が必要です。Web デザインでは、アニメーション効果がページに優れたユーザーエクスペリエンスをもたらすことがあります。グリッター効果は、要素をより目を引くようにできる一般的なアニメーション効果です。 CSSを使って要素のフラッシュ効果を実現する方法を紹介します。 1. フラッシュの基本的な実装まず、フラッシュ効果を実現するには、CSS のアニメーションプロパティを使用する必要があります。アニメーション属性の値には、アニメーション名、アニメーション実行時間、アニメーション遅延時間を指定する必要があります。

PowerPoint でアニメーションが機能しない [修正] Feb 19, 2024 am 11:12 AM

プレゼンテーションを作成しようとしていますが、アニメーションを追加できませんか? Windows PC 上の PowerPoint でアニメーションが機能しない場合は、この記事が役に立ちます。これは多くの人が不満を抱く一般的な問題です。たとえば、Microsoft Teams でのプレゼンテーション中または画面録画中にアニメーションが停止する場合があります。このガイドでは、Windows 上の PowerPoint で動作しないアニメーションを修正するのに役立つさまざまなトラブルシューティングテクニックを説明します。 PowerPoint アニメーションが機能しないのはなぜですか? Windows 上で PowerPoint のアニメーションが機能しない問題を引き起こす可能性のある考えられる理由として、次のようなことが考えられます。

最初に入力してから終了するように ppt アニメーションを設定する方法 Mar 20, 2024 am 09:30 AM

私たちは日々の仕事で ppt をよく使用しますが、ppt のすべての操作機能に精通していますか?例: ppt でアニメーション効果を設定する方法、切り替え効果を設定する方法、各アニメーションの効果時間はどれくらいですか?各スライドは自動的に再生されますか、ppt アニメーションの開始と終了などはできますか? 今回は、まず ppt アニメーションの開始と終了の具体的な手順を共有します。以下にあります。友達、見に来てください。見て！ 1. まず、コンピューターで ppt を開き、テキストボックスの外側をクリックしてテキストボックスを選択します (下図の赤い丸で示されているように)。 2. 次に、メニューバーの[アニメーション]をクリックし、[消去]効果を選択します(図の赤丸部分)。 3. 次に、[

2年の遅れを経て、国産3Dアニメ映画『エル・ランシェン：深海竜』が7月13日に公開予定 Jan 26, 2024 am 09:42 AM

当サイトは1月26日、国産3Dアニメ映画『エル・ランシェン：深海竜』が最新スチールを公開し、7月13日に公開されると正式に発表したと報じた。「Er Lang Shen: The Deep Sea Dragon」は、Mihuxing (Beijing) Movie Co., Ltd.、Horgos Zhonghe Qiancheng Film Co., Ltd.、Zhejiang Hengdian Film Co., Ltd.、Zhejiang Gongying Film によって制作されていることがわかります。 Tianhuo Technology Co., Ltd.とHuawen Image (Beijing) Film Co., Ltd.が制作し、Wang Junが監督したこのアニメーション映画は、当初、2022年7月22日に中国本土で公開される予定でした。。このサイトのあらすじ：授与神の戦いの後、蒋子耶が神々を分割するために「授与神リスト」を持ち出し、授与神リストは天宮によって九州の深海に封印された秘密の領域。実は、授与神リストには神職以外にも強力な悪霊が数多く封印されている。

Windows 11でアニメーションを無効にする方法 Apr 16, 2023 pm 11:34 PM

Microsoft Windows 11 には、多くの新機能が含まれています。ユーザーインターフェイスが更新され、いくつかの新しいエフェクトも導入されました。デフォルトでは、アニメーション効果はコントロールやその他のオブジェクトに適用されます。これらのアニメーションを無効にする必要がありますか? Windows 11 には視覚的に魅力的なアニメーションとフェード効果が備わっていますが、特定のタスクに多少の遅れが生じるため、一部のユーザーにとってはコンピューターが遅く感じる場合があります。アニメーションをオフにして、応答性の高いユーザーエクスペリエンスを実現するのは簡単です。オペレーティングシステムに加えられたその他の変更を確認した後、Windows 11 でアニメーション効果をオンまたはオフにする方法を説明します。方法についての記事もあります

Vue を使用してタイプライターアニメーション効果を実装する方法 Sep 19, 2023 am 09:33 AM

Vue を使用してタイプライターアニメーションの特殊効果を実装する方法タイプライターアニメーションは、Web サイトのタイトル、スローガン、その他のテキスト表示でよく使用される、一般的で目を引く特殊効果です。 Vue では、Vue カスタム命令を使用してタイプライターアニメーション効果を実現できます。この記事では、Vue を使用してこの特殊効果を実現する方法を詳しく紹介し、具体的なコード例を示します。ステップ 1: Vue プロジェクトを作成するまず、Vue プロジェクトを作成する必要があります。 VueCLI を使用して新しい Vue プロジェクトをすばやく作成することも、手動で作成することもできます。

10月7日より配信開始となるアニメ『アークナイツ冬隠の帰還』の最終PVが公開 Sep 23, 2023 am 11:37 AM

このサイトのリライトが必要なコンテンツは次のとおりです。 9 リライトが必要なコンテンツは次のとおりです。月リライトが必要なコンテンツは次のとおりです。 23 リライトが必要なコンテンツは次のとおりです。デイリーニュースの本線ドラマアニメシリーズ「アークナイツ」の第2シーズン「アークナイツ:Winter Hidden Return」の最終リリースが発表されました。書き換える必要がある内容は: PVです。書き換える必要がある内容は次のとおりです。10. 書き換える必要がある内容は次のとおりです。書き換える必要がある内容は: 7。書き換える必要がある内容は次のとおりです: 書き換える必要がある内容は次のとおりです: 00:23 書き換える必要がある内容は次のとおりです: 正式にリリースされました。公式に入るにはここをクリックしてくださいテーマのウェブサイト。書き直す内容は、「アークナイツ冬の秘境帰還」が「アークナイツ暁への序曲」の続編であることに当サイトが気付いたので、あらすじは以下の通りです。のグループ

See all articles

ngAnimate プラグインは何をしますか?

ngAnimate プラグインは何をしますか?

アニメーションを定義するには?

ホットAIツール

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

人気の記事

ホットツール

メモ帳++7.3.1

SublimeText3 中国語版

ゼンドスタジオ 13.0.1

ドリームウィーバー CS6

SublimeText3 Mac版

ホットトピック