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

Posted 2023-03-06

【中文标题】AngularJS Material Design 没有 Animations 支持，如何实现？

【英文标题】：AngularJS Material Design does not have Animations support, how to achieve?

【发布时间】：2015-01-23 08:21:15

【问题描述】：

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

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

但是，支持的开源项目 Angular Material Design 没有针对这些动画的任何指令或规定。我怎样才能实现这个动画请指导。

我打算使用 CSS3 动画来实现。我应该如何使用它们，架构应该是什么，请建议。

【问题讨论】：

那么@rahat-khanna，你有没有找到一个有利的解决方案？我处于同样的情况，我正在考虑 1) 使用像 Angular Material 这样的模拟材料设计框架，2) 根本不使用 Material Design，或者 3) 使用原生。我宁愿不原生，所以我倾向于 1。

我认为如果你不想去本地化，去 1 是唯一的选择。此外，一些答案中提到的 CSS 框架已经发展成熟。

我现在检查了 angular-material 门户，看起来他们现在拥有所有动画：material.angularjs.org/#

【参考方案1】：

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

【讨论】：

虽然你给的链接很棒，而且他们做了很棒的东西，但是他们的 javascript 组件是基于 jQuery 的，我不能直接在我的 AngularJS 项目中使用它们。

同意，进入 materialize 的一大障碍是 JS 组件没有 angularjs 指令。不幸的是，Materiazlize 是美丽的。

There is now a project (Angular Materialize) 为 Materialize 框架创建 Angular 指令。

【参考方案2】：

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

【讨论】：

Angular 也是如此 - material.angularjs.org 但我想实现像 google.com/design/spec/animation/… 这样的自然动画

【参考方案3】：

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

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

【参考方案4】：

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

ng-fx

您可以简单地安装这个包并将其作为依赖项注入，然后添加动画就像在我们的 HTML 中添加特定的类一样简单。

您仍然需要阅读材料设计指南并确定哪些动画适合以及应该在哪里使用。

【参考方案5】：

试试这个

https://material.angularjs.org

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

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

【讨论】：

可能是我，但问题中明确提到了 Angular Material 项目，问题是没有动画规定。