web-dev-qa-db-ja.com

AngularJS Material Designはアニメーションをサポートしていませんが、どのように達成できますか？

AngularJSを使用してハイブリッドアプリを作成していますが、Material Design UI Principlesに基づいてほしい。私はグーグルのウェブサイトでこれについて読んでいます。彼らは、素材が受けるべき自然なアニメーションについて多くを説明してきました。このページのデモンストレーションが大好きです。

http://www.google.com/design/spec/material-design/introduction.html

ただし、サポートしているオープンソースプロジェクトAngular Material Designには、これらのアニメーションのディレクティブや規定はありません。このアニメーションを実現するにはどうすればよいかをガイドしてください。

CSS3アニメーションを使用してそれを行う予定です。それらをどのように使用し、どのようなアーキテクチャにするべきかを提案してください。

javascriptangularjscss3animationmaterial-design
18
Rahat Khanna

まだ決定していない場合、マテリアライズ（ http://materializecss.com ）は、非常に使いやすいマテリアルデザインベースのCSSフレームワークです。 Bootstrapと同様の構造です。アニメーションには、自然な雰囲気を与えるキュービックイージングがあります。

12
Dogfalo

これがあなたの助けになるかどうかはわかりませんが、CSSフレームワークはマテリアルデザインに基づいて構築されています http://material-ui.com

5
Pixelomo

Famo.usを使用できます。概念実証は次のとおりです。

http://blog.aminjam.com/building-mobile-apps-with-famous-and-angular-material/

3
Sat Mandir Khalsa

Angular Material Projectはアニメーションを提供しませんが、一般に、AngularJSの場合、次のパッケージは非常に便利です。

ng-fx

このパッケージをインストールして依存関係として挿入するだけで、特定のクラスをHTMLに追加するだけでアニメーションを追加できます。

マテリアルデザインのガイドラインを確認し、どのアニメーションが適切で、どこで使用すべきかを把握する必要があります。

1
Vishwajeet Vatharkar