AngularJS Material Design没有动画支持,如何实现?

时间:2014-11-25 11:00:43

标签: javascript angularjs css3 animation material-design

我正在使用AngularJS制作混合应用程序,并希望它基于Material Design UI Principles。我一直在谷歌网站上看到这个。他们已经解释了很多关于材料应该经历的自然动画。我很喜欢这个页面上的演示。

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

但是,支持性开源项目Angular Material Design没有针对这些动画的任何指令或规定。如何实现此动画请指导。

我计划使用CSS3动画做到这一点。我应该如何使用它们以及架构应该是什么,请建议。

5 个答案:

答案 0 :(得分:12)

如果您还没有决定,Materialise(http://materializecss.com)是一个基于Material Design的CSS框架,非常易于使用。它的结构与Bootstrap类似。动画有立方缓和,给人以自然的感觉。

答案 1 :(得分:5)

不确定这对您是否有任何帮助,但基于Material Design http://material-ui.com构建了CSS框架

答案 2 :(得分:3)

你可以使用famo.us.这是一个概念证明:

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

答案 3 :(得分:1)

Angular Material Project不提供动画,但一般来说,对于AngularJS,我发现以下包非常有用

  

<强> ng-fx

您可以简单地安装此软件包并将其作为依赖项注入,然后添加动画就像将特定类添加到HTML中一样简单。

您仍然需要仔细阅读材料设计指南,找出适合的动画以及应该使用的位置。

答案 4 :(得分:-4)

尝试使用此

https://material.angularjs.org

“Angular Material项目是Angular.js中Material Design的一个实现。该项目提供了一组基于Material Design系统的可重用,经过良好测试和可访问的UI组件。

与Polymer项目的Paper元素集合类似,Angular.js,Material Design UX和其他产品团队在Google内部支持Angular Material。“