AngularJSを使ってみよう

アニメーションを使うための準備

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
動的に構成するページでアニメーションを使うための準備についいてご説明します。
講師:
04:30

字幕

このレッスンでは angular が 動的にページを構成する時 アニメーションを適用する その準備について説明します 今開いているページは マウスポインタを項目に重ねると 大きくなる 手前に迫ってきてるように見えますね これは CSS で設定しています 特に angular の設定ではありません けれどもこの CSS のアニメーションを angular で利用することができます その為には ngAnimate という モジュールを使えるように ライブラリを読み込むという 準備が必要ですので その説明をしましょう 今お見せした一覧表示のページの テンプレートを構成しているのが この list.html です 各項目は li 要素で構成されています そして そのクラスとして artist というのが設定されていますけれども これに対して CSS のアニメーションを 適用しました そのスタイルシートはこちら style.css です artist という項目がありますね その li 要素の項目に対して transition 代表してこれを呼びますけど これがアニメーションの設定です アニメーションの設定するプロパティは すべて それに対して 0.3 秒間で ease-out というのは段々遅くなるような アニメーションをするということです これが適用されているために 先程のようなマウスポインタを合わせると hover ですね 拡大するというアニメーションが 行われた訳です あとちょっと細かかったですけども 不透明度が最初はちょっと下がっていて マウスポインタを合わせると 完全に不透明になると いう風になっていました この CSS のアニメーションを angularJS がページを構成する時 その時に適用することができます その為に ngAnimate という モジュールを使います こちら angularJS の公式ページの レファレンスです ngAnimate これを使うためには ライブラリを新たに1つ 追加しなければなりません angular-animate です これはトップページの Download そして Extras の中の angular-animate これですね js と圧縮版は .min.js です 個別にダウンロードする場合には このページからダウンロードして下さい 或いは Download で Zip をダウンロードしてあれば そのダウンロードしたフォルダの中に 今のライブラリは含まれています Zip ファイルをダウンロードして 展開したのが この angular-1.4.7 のフォルダです その中にある angular-animate.min 圧縮版の方を使うことにします それから .map もあった方が 余分な警告に煩わされないので 一緒に作業用のフォルダのライブラリの中に コピーすることにします この中の lib というのがライブラリの フォルダとして決めています そして angular ですね この中にコピーします これでライブラリを使う準備は整いました そしてダウンロードしたライブラリの ファイルをメインとなる index.html こちらの方に script 要素で 読み込むことにします script ですね そして src ソースの指定です 参照で 先程ダウンロードしてコピーした― angular-animate.min.js ですね これを開いてタグを閉じ 保存します これで ngAnimate のモジュールを 使う準備が整いました このレッスンではアニメーションを CSS から 動的に angularJs で適用する為の― ngAnimate というモジュール これを使う為のライブラリのダウンロードと 設定について説明しました

AngularJSを使ってみよう

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

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

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

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

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