Animationsでリストにモーションをつける2017-11-30マテリアルデザインとは、現実世界のルール(奥行きや、影など、質量)を取り入れることで、直感的な操作を実現しているデザインです。具体的には、紙の物質的な特性を画面に置き換えています。・めくる・綴じる・重ねるといった紙の機能を模倣しています。Animationsを使ってリストにアニメーションをつけていきたいと思います。1.ガイドラインを確認する。下記のガイドラインのモーション(Motion)を確認します。デザインのガイドライン「作成」の章を確認すると、サーフェスに動きをつける複数の新しいサーフェスを同時に作成する場合は、各サーフェスの出現をわずかにずらします。明確で滑らかな焦点のパスを一方向に作ります。Animationsで実現します。http://blog.tanakas.org/wp-content/uploads/2017/11/list-animation.mp42.Animation設定用ファイルを作成する。opacityとtransformを使ってアニメーションを実現します。]);3.Componentで作成したAnimation設定用ファイルを読み込む。Componentのanimationsに設定します。:}4.htmlでanimationを設定するリストの各アイテムをラップする要素にAnimarionを設定します。}}</div></div>以上で完成です。