AngularJSを使ってみよう

アニメーションを与える

全334コースを10日間無料で

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
ngAnimateのモジュールを使うと、AngularJSの動的な表示にアニメーションが加えられます。
講師:
08:52

字幕

このレッスンでは angularJS の 動的な表示に アニメーションを加えています 今画面で開いている「アーティストの名簿」 という想定なんですけども それぞれの項目にポインタを合わせると 拡大して手前に迫っているように 見えますね これはそれぞれの項目は li 要素で 作ってありますので li 要素にクラスを定めて CSS で アニメーションを加えれば済むことです けれども angularJS で 付け加えた機能として ここに検索があります 例えば hi と打つと hi で始まる名前やプロフィールの人が 表示されるわけなんですけども その時にアニメーションが 加わっていますね このアニメーション 項目が加わったり 或いは削除されたりする時に アニメーションが適用されているんですが 項目が加わるとか除かれるというのは CSS の標準的なセレクタの中には ありません これを ng-animate という モジュールを使うことで angularJS に付け加えることができます それを説明しましょう 今開いた HTML ドキュメントですが angularJS のアニメーションを付け加える― angular-animate.min.js という― ライブラリが読み込んであります これで ng-animate のモジュールを使う 準備は整っているんですが まだ angularJS のアニメーションは 加えられていません リスト表示は ng-view という ディレクティブがあって これは angular-route のライブラリから 使える ― ng-route というモジュールで 動的にテンプレートを切り替えています その一覧表示のテンプレートが こちらなんですけども それぞれの個人の情報を 司っているのがこの li 要素ですね そしてクラス artist というものが 加えられています これに対して標準的な CSS の アニメーション設定がしてあります それを確認しましょう スタイルシートなんですが artist に対して これですね その li 要素がある場合には transition というのがそのアニメーションを 加えるプロパティなんですけども こちらはブラウザ対応ですね ベンダーのプレフィックスがついていますが 全て同じ設定です 全てのプロパティについて 0.3 秒かけて ease-out というのは アニメーションの仕方なんですが 段々遅くなるようなアニメーションを 加えるということになっています そして標準的には opacity 不透明度は ,9 ということで ちょっと透明なんですけども マウスポインタを重ねた時 opacity が1になります つまり完全な不透明 そしてここも transform の プロパティを使って 1.2 倍 サイズを拡大していると いうことになります では 今現在 angularJS の アニメーションは加えられておらず CSS の標準的なアニメーションだけが 入った状態を確認しましょう ブラウザで開いて マウスポインタを重ねると ちょっと濃くなって 1.2 倍 前にせり出している感じになっていますね けれども angularJS の機能 ここで検索でヒラリーさん hil まで行くと 2人に絞られるんですけども このアニメーションは完全に パッと切り替わっていますね これがゆっくりと連続的に 変化するようなアニメーションに ng-animate のモジュールを使うと 設定することができます まずメインの index.html この html 要素には ng-app の ディレクティブで myApp と マイアップですね というアプリケーションの設定がされています このメインの設定は app.js で行っているんですけども myApp ですね そのモジュールとして artistControllers というのがあります それはこの controllers.js の方で 設定してあるんですけども この artistControllers のモジュールに ng-animate を付け加えます " " で囲んで ng-animate です そして保存します これで特別な CSS の設定が できるようになります スタイルシートの方に行って 1番下に付け加えましょう 検索で項目が減る時 或いは増える時に アニメーションさせたいと思います その為のセレクタとして 特別に設定するんですが 先程 artist でしたね こちらですけども クラスが artist という設定になっているので ここにそのセレクタを加えたいと思います .artist そこにng で始まる特別なセレクタです enter と いうのが項目が加えられる時です もう1つ 同じく artist の ng-leave というのが項目が除かれる時と いうことになります ここに設定しますけれども まずは不透明度 opacity は1ということで これが標準的な状態ですね あと高さです 高さは 80px とします それから overflow を hidden として これが標準の場合の設定です アニメーションというのは始まりと 終わりがありますよね 終わりの設定をしましょう これをコピーして まんまペーストします 終わりの状態はと言うと opacity これは完全に 透明にしてしまいます 高さは潰してしまおうということで0 overflow は変えません これで始まりと終わりは設定できたかと セレクタが同じじゃないか その通りですね まず leave から行きますけども 削除される時 削除される時は標準の状態ですね そこから削除が終わった時というのは ここに更に付け加えます また ng で始まって leave active とすると これが終わりの状態になります 削除され終わった時 完全に潰れて透明になるということです 今度入るときは この完全に潰れた状態から スタートして そして入り終わった時は 標準の状態になる訳ですね ですからここも終わった時ということで .ng enter 同じく active です ということでこの CSS ファイルも 保存しましょう ブラウザでリロードします マウスポインタを重ねた時の 表示は最初のままですね さて 検索です 検索でヒラリーさん 行ってみましょう hill これで一人になりましたね そして消して行くとまた出ている もう一人位 ジェニファーさん n ここで一人に絞られましたね ご覧の通り項目が増える時減る時の アニメーションが付け加わりました このレッスンでは angularJS の 動的な処理に対して アニメーションを加える方法について 説明しました その為にはまずライブラリとして angular-animate という― ライブラリを読み込んでおきます それからコントローラーの方には ng-animate というモジュールを設定します そうすると CSS で特別なセレクタが 使えるようになるということでした 項目が加わるのが ng-enter です 消えるのが ng-leave その これが始まりなんですけど 終わる場合には更に ng enter もしくは leave に active を付け加えるということでした

AngularJSを使ってみよう

AngularJSはHTMLを拡張するフレームワークで、Webページを動的に生成できます。このコースではJavaScriptの基礎を学んだ方を対象に、AngularJSのインストールからWebアプリの作成までを実際にコードを書きながら解説します。JSONファイルから読み込んだデータリストの作成やデータの並べ替え・検索などを説明します。

2時間12分 (20 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 2,990
発売日:2015年12月13日

このコースは、「オンデマンド」でご利用可能であり、ダウンロードすることもオンラインで見ることもできます。

ダウンロードすると、オフラインでコースを使用し、豊富なインターフェースをフルに活用できます。複数のデバイスを使用したり、 一度に全コースをダウンロードしたくない場合は、アカントにログインして、ストリーミング・ビデオとしてコースのレッスンを視聴してください。

ビデオトレーニングをお楽しみいただけますように! お問い合わせは、cs-jp@lynda.com宛までご連絡ください。