Javascript AngularJS Material Design 没有Animations 支持,如何实现?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/27124876/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-22 23:45:28  来源:igfitidea点击:

AngularJS Material Design does not have Animations support, how to achieve?

javascriptangularjscssanimationmaterial-design

提问by Rahat Khanna

I am making a Hybrid App using AngularJS and want it to be based on the Material Design UI Principles. I have been reading about this on the google website. They have explained a lot about the natural animations that material should undergo. I am loving the demonstrations on this page.

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

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

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

However, the supporting open source project Angular Material Design does not have any directives or provisions for these animations. How can I achieve this animations please guide.

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

I am planning to do it using CSS3 Animations. How should I use them and what should be the architecture, please suggest.

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

采纳答案by Dogfalo

If you haven't decided already, Materialize (http://materializecss.com) is a Material Design based CSS framework that is very easy to use. It is structured similarly to Bootstrap. The animations have cubic easing that gives it the natural feel.

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

回答by Pixelomo

Not sure if this will be any help to you but a CSS framework has been built based on Material Design http://material-ui.com

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

回答by Sat Mandir Khalsa

回答by Vishwajeet Vatharkar

Angular Material Project does not provide animations, but in general, for AngularJS, I've found following package very useful

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

ng-fx

ng-fx

You can simply install this package and inject it as dependancy, and then adding animations is as simple as adding the specific classes to our HTML.

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

You still need go through material design guidelines and figure out which animations are suitable and where they should be used.

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

回答by isaldarriaga

Try using this

尝试使用这个

https://material.angularjs.org

https://material.angularjs.org

"The Angular Material project is an implementation of Material Design in Angular.js. This project provides a set of reusable, well-tested, and accessible UI components based on the Material Design system.

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

Similar to the Polymer project's Paper elements collection, Angular Material is supported internally at Google by the Angular.js, Material Design UX and other product teams."

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