ngAnimateを使用したAngularJSアプリのアニメーション化

AngularJSは、シングルページアプリケーション（SPA）の作成を非常に簡単にするスーパーヒーローのJavaScriptフレームワークです。その上、AngularJSには、すばらしいユーザーエクスペリエンスを作成するために使用できるいくつかのAngularモジュールが付属しています。この投稿では、人気のあるngAnimateを使用して、角度ビューにページ遷移/アニメーションを追加する方法を説明します。

ngAnimateは、ngRepeat、ngView、ngInclude、ngIf、ngMessageなどのさまざまなディレクティブで使用できます。

この投稿では、ngViewでアニメーションを使用します

ここではAdobeのBracketsIDEを使用していますが、Sublime Text、JetBrainsのWebStormなどの他のものを自由に使用できます。

注意 ： また、Bootswatch Bootstrap APIを使用して、HTMLページの外観を美しくします。

プロジェクト構造：

以下はBracketsIDEのプロジェクト構造です

プロジェクトで使用される各ファイルの簡単な説明は次のとおりです

Animation.css –ページアニメーションを定義するメインCSSファイル

bootstrap.min.css –私たちに与えるためのbootswatchブートストラップ タグ美しい外観

config.js –ルートとコントローラーとともにAngularモジュールを定義するメインJavaScriptファイル

shellPage.html –これは、他のビューが動的にロードされるシェルページです。

view1.html、view2.html、view3.html –これらはshellPageにロードされる部分的なビューです

アニメーションはどのように適用されますか：

ngAnimateは、ビューに入るのか出るのかに応じて、CSSクラスをさまざまなAngularディレクティブに適用します

.ng-入力 –このCSSクラスは、ディレクティブがページに読み込まれるたびにディレクティブに適用されます

C ++の抽象化とは何ですか

.ng-leave –このCSSクラスは、ディレクティブがページを離れるたびにディレクティブに適用されます

各ファイルを1つずつ見ていきましょう

shellPage.html

shellPageは必要なリソースをロードし、ng-appをbodyに適用し、ng-viewを追加してビューを動的に挿入します。

config.js

設定ファイルでは、ルートとコントローラーとともに角度モジュールを定義します。

モジュールtransitionAppには、ngAnimateとngRouteの2つの依存関係があります。

var transitionApp = angle.module（ 'transitionApp'、['ngAnimate'、 'ngRoute']）transitionApp.config（function（$ routeProvider）{$ routeProvider .when（ '/'、{templateUrl： 'partials / view1.html' 、コントローラー： 'view1Controller'}）。when（ '/ view2'、{templateUrl： 'partials / view2.html'、コントローラー： 'view2Controller'}）。when（ '/ view3'、{templateUrl： 'partials / view3。 html '、コントローラー：' view3Controller '}）}）transitionApp.controller（' view1Controller '、function（$ scope）{$ scope.cssClass =' view1 '}）transitionApp.controller（' view2Controller '、function（$ scope）{ $ scope.cssClass = 'view2'}）transitionApp.controller（ 'view3Controller'、function（$ scope）{$ scope.cssClass = 'view3'}）

URLに応じてシェルページに挿入される3つの部分ビュー（view1、view2、view3）を定義しました。それぞれのコントローラーは、CSSクラスの名前であるcssClass属性を設定します。これは、ng-viewに適用されます。これらのCSSクラスでアニメーションを定義し、各ページに異なるアニメーションをロードします。

部分ページview1.html、view2.html、view3.html

部分的なページには何もありません。テキストと他のビューへのリンクだけです。

view1.html

これはビュー1です
  ビュー2   ビュー3 

view2.html

これはビュー2です
  ビュー1   ビュー3 

view3.html

これはビュー3です
  ビュー1   ビュー2 

これらの3つのHTMLファイルは部分的なページであり、config.jsファイルで定義したURLに従ってshellPage.htmlに挿入されることに注意してください。

スタイルとアニメーションの定義：

CSSを適用して、ビューに生命を吹き込みましょう

.view {bottom：0 padding-top：200px position：absolute text-align：center top：0 width：100％} .view a {margin-top：50px} .view h1 {font-size：60px} #heading { color：＃333 position：absolute text-align：center top：50px width：100％} / *部分ビューページ（view1、view2、view3）の背景色とテキスト色------------- ------------------------------------------------ * / .view1 {background：＃bef2de color：＃00907c} .view2 {background：＃D4D0EA color：＃55316f} .view3 {background：＃FFCBA4 color：rgba（149、95、40、0.91）}

異なるビュー間をクリーンに移行するために、CSSz-indexプロパティを設定します

.view.ng-leave {z-index：9999} .view.ng-enter {z-index：8888}

次に、アニメーションを定義します。

スライド左アニメーション

/ *左にスライドアウト* / @keyframes slideOutLeft {to {transform：translateX（-100％）}} @ -moz-keyframes slideOutLeft {to {-moz-transform：translateX（-100％）}} @ -webkit-keyframes slideOutLeft {to {-webkit-transform：translateX（-100％）}}

アニメーションのスケールアップ

/ *スケールアップ* / @keyframes scaleUp {from {opacity：0.3 transform：scale（0.8）}} @ -moz-keyframes scaleUp {from {opacity：0.3 -moz-transform：scale（0.8）}} @ -webkit- keyframes scaleUp {from {不透明度：0.3 -webkit-transform：scale（0.8）}}

右のアニメーションからスライドイン

Hadoopの水路とは

/ *右からスライドイン* / @keyframes slideInRight {from {transform：translateX（100％）} to {transform：translateX（0）}} @ -moz-keyframes slideInRight {from {-moz-transform：translateX（100 ％）}から{-moz-transform：translateX（0）}} @ -webkit-keyframes slideInRight {from {-webkit-transform：translateX（100％）}から{-webkit-transform：translateX（0）}}

ボトムアニメーションからスライドイン

/ *下からスライドイン* / @keyframes slideInUp {from {transform：translateY（100％）} to {transform：translateY（0）}} @ -moz-keyframes slideInUp {from {-moz-transform：translateY（100 ％）}から{-moz-transform：translateY（0）}} @ -webkit-keyframes slideInUp {from {-webkit-transform：translateY（100％）}から{-webkit-transform：translateY（0）}}

回転と落下のアニメーション

/ *回転して落下* / @ -webkit-keyframesrotateFall {0％{-webkit-transform：rotateZ（0deg）} 20％{-webkit-transform：rotateZ（10deg）-webkit-animation-timing-function：ease- out} 40％{-webkit-transform：rotateZ（17deg）} 60％{-webkit-transform：rotateZ（16deg）} 100％{-webkit-transform：translateY（100％）rotateZ（17deg）}} @ -moz -キーフレームrotateFall {0％{-moz-transform：rotateZ（0deg）} 20％{-moz-transform：rotateZ（10deg）-moz-animation-timing-function：ease-out} 40％{-moz-transform： rotateZ（17deg）} 60％{-moz-transform：rotateZ（16deg）} 100％{-moz-transform：translateY（100％）rotateZ（17deg）}} @keyframesrotateFall {0％{transform：rotateZ（0deg） } 20％{変換：rotateZ（10deg）アニメーション-タイミング-関数：イーズアウト} 40％{変換：rotateZ（17deg）} 60％{変換：rotateZ（16deg）} 100％{変換：translateY（100％） rotateZ（17deg）}}

新聞アニメーションを回転させる

/ *新聞を回転させる* / @ -webkit-keyframesrotateOutNewspaper {to {-webkit-transform：translateZ（-3000px）rotateZ（360deg）opacity：0}} @ -moz-keyframesrotateOutNewspaper {to {-moz-transform：translateZ （-3000px）rotateZ（360deg）不透明度：0}} @keyframesrotateOutNewspaper {から{変換：translateZ（-3000px）rotateZ（360deg）不透明度：0}}

アニメーションの適用：

以前に定義したアニメーションを適用する時が来ました

1つのアニメーションを表示

/ *ページを離れて入力するアニメーションを1つ表示します* / .view1.ng-leave {-webkit-animation：slideOutLeft 0.5s both ease-in -moz-animation：slideOutLeft 0.5s both ease-in Animation：slideOutLeft 0.5s both easy -in} .view1.ng-enter {-webkit-animation：scaleUp0.5s両方ease-in-moz-animation：scaleUp 0.5s両方ease-inアニメーション：scaleUp0.5s両方ease-in}

2つのアニメーションを表示

/ *ページを離れて入力するために2つのアニメーションを表示します* / .view2.ng-leave {-webkit-transform-origin：0％0％-webkit-animation：rotateFall 1s both ease-in -moz-transform-origin：0％ 0％-moz-animation：rotateFall 1s両方のease-in変換元：0％0％アニメーション：rotateFall1s両方のease-in} .view2.ng-enter {-webkit-animation：slideInRight0.5s両方のease-in- moz-animation：slideInRight 0.5s両方のイーズインanimation：slideInRight0.5s両方のイーズイン}

3つのアニメーションを表示

/ *ページを離れて入力するアニメーションを3つ表示します* / .view3.ng-leave {-webkit-transform-origin：50％50％-webkit-animation：rotateOutNewspaper .5s both ease-in -moz-transform-origin：50 ％50％-moz-animation：rotateOutNewspaper .5s両方ease-in変換元：50％50％アニメーション：rotateOutNewspaper.5s両方ease-in} .view3.ng-enter {-webkit-animation：slideInUp0.5s両方ease -in -moz-animation：slideInUp 0.5s両方イーズインanimation：slideInUp0.5s両方イーズイン}

すべての変更が完了しました。次に、アプリケーションを実行します

アプリケーションの実行

アプリケーションを実行すると、以下のページが表示されます。

リンクをクリックすると、部分的なページに出入りするときに、アニメーションが表示されます。

使用できるアニメーションは他にもいろいろあります。また、考えられる効果の圧倒的なセットはここにあります： http://tympanus.net/Development/PageTransitions/

コードをダウンロードして、自分で試してみてください

[buttonleads form_title =”ダウンロードコード” redirect_url = https：//edureka.wistia.com/medias/erx9uep9sa/download？media_file_id = 80450196course_id = 283button_text =”ダウンロードコード”]

上記のAnimationwithngAnimateブログが気に入っていただけたでしょうか。 Angular JSについて詳しく知りたい場合は、私たちのJSをご覧にならない理由をお勧めします。 コースページ。 EdurekaでのAngularJS認定トレーニングでは、インストラクター主導のライブセッションと実際のユースケースを使用した実践的なトレーニングを通じて、AngularJSのエキスパートになります。

質問がありますか？コメント欄にご記入ください。折り返しご連絡いたします。

関連記事：

SAXパーサーを使用したXMLファイルの解析