AngularJS Material Design没有动画支持，如何实现？

Question

我正在使用AngularJS制作混合应用程序，并希望基于Material Design UI原则。我已经在谷歌网站上阅读了很多相关信息。他们详细解释了Material Design应该遵循的自然动画。我喜欢这个页面上的演示。

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

然而，支持的开源项目Angular Material Design中没有任何指令或提供这些动画。请问如何实现这些动画，请指导。

我打算使用CSS3动画来完成。应如何使用它们，以及应该采用什么架构，请给出建议。

- Rahat Khanna

---

那么@rahat-khanna，你找到了一个满意的解决方案吗？我处于同样的情况，正在考虑 1）选择模拟 Material Design 框架，例如 Angular Material，2）完全不使用 Material Design，或者 3）选择原生开发。我不想使用原生开发，因此我倾向于选择 1。 - zkent

我认为如果你不想使用本地语言，那么只有选择前往1这个选项。此外，一些答案中提到的CSS框架已经发展成熟了。 - Rahat Khanna

我现在检查了angular-material门户网站，看起来他们现在已经拥有所有的动画效果了：https://material.angularjs.org/#/ - lprsd

Answer 1

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

- Dogfalo

---

虽然您提供的链接很棒，他们做了很好的工作，但是他们的JavaScript组件基于jQuery，我不能直接在我的AngularJS项目中使用它们。 - Rahat Khanna

同意，Materialize 的一个很大的门槛是没有针对 JS 组件的 AngularJS 指令。虽然 Materialize 很漂亮，但这实在不幸。 - lostintranslation

现在有一个项目（Angular Materialize），旨在为Materialize框架创建Angular指令。 - Huey

Answer 2

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

- Pixelomo

---

同样的，Angular也有这个 - http://material.angularjs.org 但我想要实现自然的动画效果，就像http://www.google.com/design/spec/animation/authentic-motion.html#authentic-motion-mass-weight。 - Rahat Khanna

Answer 3

你可以使用famo.us。这是一个概念验证：

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

- Sat Mandir Khalsa

Answer 4

Angular Material项目不提供动画，但是对于AngularJS来说，我发现以下软件包非常有用： ng-fx 您可以简单地安装此软件包并将其注入为依赖项，然后只需将特定类添加到我们的HTML中即可添加动画。

您仍然需要遵循材料设计指南，并确定哪些动画适合在哪里使用。

- Vishwajeet Vatharkar

Answer 5

尝试使用这个

https://material.angularjs.org

Angular Material项目是在Angular.js中实现Material Design的一个项目。该项目提供了一组可重用、经过充分测试和易于访问的UI组件，这些组件基于Material Design系统。

类似于Polymer项目的Paper元素集合，Angular Material在Google内部得到了Angular.js、Material Design UX和其他产品团队的支持。

- isaldarriaga

---

可能是我看错了，但是Angular Material项目在问题中明确提到，问题在于没有提供动画方面的支持。 - Huey