コアポイント
animation
アプリケーションの一部をアニメーション化して、発生している変更を示すことができます。前回の投稿で、AngularアプリケーションでCSSアニメーションのサポートを紹介しました。この記事では、JavaScriptを使用してAngularJSアプリケーションにアニメーションを追加する方法を学びます。
Angularでは、CSSとJavaScriptアニメーションの唯一の違いは、それらの定義方法です。定義されたアニメーションの使用方法に違いはありません。まず、nganimateモジュールをアプリケーションのルートモジュールにロードする必要があります。
JavaScriptアニメーションで処理されるアニメーションイベントも変更されていません。以下は、アニメーションと異なる操作のイベントをサポートするコマンドのリストです。
angular.module('coursesApp', ['ngAnimate']);イベント
angular.module('coursesApp', ['ngAnimate']);angularjsでJavaScriptアニメーションを書くときは、次のポイントを覚えておいてください。
ng-view
にアニメーションを追加します次のアニメーションは、ビューがページに入ると、視覚効果を生成します。
上記のコードは、ビューがページに入るとスライディング効果を作成します。完了方法はコールバックとして渡されます。これは、アニメーションが完了し、フレームワークが次の操作に進むことができることを示すためです。
angular.module('coursesApp').animation('.name-of-animation', function(<injectables></injectables>) {
return {
event: function(elem, done){
// 动画逻辑
done();
}
};
});メソッドがどのように呼び出されるかに注意してください。 AngularJがロードされる前にjQueryライブラリがロードされるため、要素をjQueryオブジェクトに変換する必要はありません。
ここで、このアニメーションをNG-Viewディレクティブに適用する必要があります。アニメーションはJavaScriptで定義されていますが、慣習により、ターゲット指令のクラスを使用して適用します。 animate()
ng-repeatにアニメーションを追加
courseAppAnimations.animation('.view-slide-in', function () {
return {
enter: function(element, done) {
element.css({
opacity: 0.5,
position: "relative",
top: "10px",
left: "20px"
})
.animate({
top: 0,
left: 0,
opacity: 1
}, 1000, done);
}
};
});
ng-hideにアニメーションを追加
<div class="view-slide-in" ng-view=""></div>
アニメーション化されたカスタムコマンドを追加
カスタムディレクティブにアニメーションを追加するには、
courseAppAnimations.animation('.repeat-animation', function () {
return {
enter : function(element, done) {
console.log("entering...");
var width = element.width();
element.css({
position: 'relative',
left: -10,
opacity: 0
});
element.animate({
left: 0,
opacity: 1
}, done);
},
leave : function(element, done) {
element.css({
position: 'relative',
left: 0,
opacity: 1
});
element.animate({
left: -10,
opacity: 0
}, done);
},
move : function(element, done) {
element.css({
left: "2px",
opacity: 0.5
});
element.animate({
left: "0px",
opacity: 1
}, done);
}
};
});遷移が発生したら、CSSクラスを追加します。これは、アニメーションが完了した後に削除します。この指令のコードは次のとおりです
ご覧のとおり、アニメーションが完了した後にアクションを実行します。ブラウザ開発者ツールでディレクティブ要素をチェックすると、クラスがスイッチングアクティブとスイッチングADDが追加され、非常に迅速に削除されることがわかります。 CSS遷移を定義したり、JavaScriptアニメーションをカスタマイズして、発生しているアニメーションを確認できます。上記の指令で使用できるCSS遷移の例を以下に示します（簡潔にするために、ベンダーのプレフィックスは省略されています）：
angular.module('coursesApp', ['ngAnimate']);または、以下は同じ指示に使用できるjQueryアニメーションです。
angular.module('coursesApp').animation('.name-of-animation', function(<injectables></injectables>) {
return {
event: function(elem, done){
// 动画逻辑
done();
}
};
});
courseAppAnimations.animation('.view-slide-in', function () {
return {
enter: function(element, done) {
element.css({
opacity: 0.5,
position: "relative",
top: "10px",
left: "20px"
})
.animate({
top: 0,
left: 0,
opacity: 1
}, 1000, done);
}
};
});結論
<div class="view-slide-in" ng-view=""></div>
アニメーションは、適切かつ機能的に使用すると、アプリケーションをより鮮明にすることができます。ご覧のとおり、AngularJSはCSSとJavaScriptアニメーションを豊かにサポートしています。チームの状況に基づいて、これらのいずれかを選択できます。
ただし、アニメーションを大量に使用すると、アプリケーションが遅くなり、エンドユーザーのアプリケーションがオーバーデザインされているようです。したがって、この武器は注意と最適化をもって使用する必要があります。angularjsで基本的なアニメーションを作成する方法は？
AngularJSで基本的なアニメーションを作成するには、いくつかのステップが含まれます。まず、プロジェクトにAngularjsアニメーションライブラリを含める必要があります。これは、HTMLファイルに「Angular-animate.js」ファイルへの参照を追加することで実現できます。次に、「nganimate」モジュールをAngularJSアプリケーションに注入する必要があります。これは、アプリケーションモジュールの依存関係として「nganimate」を追加することで実現できます。これを行った後、CSSクラスとAngularJSディレクティブを使用してアニメーションを作成できます。たとえば、「ng-enter」および「ng-leave」クラスを使用して、要素がDOMに入ったり出されたりしたときにアニメーション化できます。
CSS遷移とアニメーションを使用して、AngularJSのアニメーションの時間を制御できます。 CSSクラスで「遷移期間」または「アニメーション期間」属性を指定することにより、アニメーションの持続時間を制御できます。さらに、「トランジションデレイ」または「アニメーション解雇」属性を使用して、アニメーションの開始時間を制御できます。これらのプロパティは、秒またはミリ秒（MS）で指定できます。
はい、JavaScriptを使用してAngularJSでアニメーションを作成できます。 CSSはシンプルなアニメーションによく使用されますが、JavaScriptは、アニメーションのタイミングと順序を正確に制御する必要があるより複雑なアニメーションに使用できます。 Angularjsでは、「$ ainmate」サービスを使用してアニメーションをプログラム的に制御できます。このサービスは、CSSクラスを追加、削除、およびクエリする方法を提供し、JavaScriptを使用して複雑なアニメーションを作成できるようにします。
「ng-repeat」でangularjsアニメーションを使用する方法は？
「ng-switch」でangularjsアニメーションを使用できますか？
angularjsアニメーションを「ng-view」で使用する方法は？
カスタムディレクティブを使用してAngularJSアニメーションを使用できますか？
ブラウザ開発者ツールを使用して、AngularJSアニメーションをデバッグできます。 DOMのアニメーション要素をチェックすることにより、AngularJSが追加および削除しているCSSクラスを確認できます。さらに、デバッグに非常に役立つ「$ Animate」サービスの「有効な」メソッドを使用して、アニメーションを有効または無効にすることができます。
以上がAngularJSアプリケーションのJavaScriptアニメーションの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
