Logo Questions Linux Laravel Mysql Ubuntu Git Menu
HTML CSS JAVASCRIPT SQL PYTHON PHP BOOTSTRAP JAVA JQUERY R React Kotlin
 

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

Tags:

javascript

css

angularjs

animation

material-design

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.

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.

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

like image 306
Rahat Khanna Avatar asked Nov 25 '14 11:11

Rahat Khanna

People also ask

Can we use Angular material in AngularJS?

Developers should note that AngularJS Material works only with AngularJS 1. x. AngularJS 1. x Long Term Support (LTS) has ended as of January 2022.

Can I use Angular material without Angular?

Yes, you can use Angular Material like bootstrap; however, their documentation is not as good as bootstrap's is. I've used it on several projects, but you have to get used to how they want you to include directives and CSS classes into your code.

What is the difference between Angular material and Material Design?

Angular material and material design basically the same. Material design is abstract for mobile and web. Angular material is implemented for Angular. So if you use "Angular material" you are using "Material design".

Is Bootstrap required for Angular material?

Can I use Angular Material and Bootstrap together? Yes, you can use parts of Angular Material and Bootstrap together in the same web or mobile project. Developers need to be careful not to use the same components, which can clash.

3 Answers

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.

like image 144
Dogfalo Avatar answered Oct 20 '22 16:10

Dogfalo

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

like image 42
Pixelomo Avatar answered Oct 20 '22 16:10

Pixelomo

You could use famo.us. Here's a proof of concept:

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

like image 40
Sat Mandir Khalsa Avatar answered Oct 20 '22 17:10

Sat Mandir Khalsa
Sign in to Comment

Related questions

ES6 import vs <script src> in html [duplicate]
How to update object in React state
Angular2 : Type 'Subscription' is not assignable to type
Horizontal ordered bin packing of svg elements
SecurityError from Facebook and Cross Domain Messaging
Design reason behind the relationship between element's property and its corresponding attribute
How to test url change with Jest
install webpack VS install webpack-cli?
Security warning in the console of BrowserWindow (electron ^9.2.0)
what are the "for" and "event" attributes of the script tag (Javascript,HTML)
Capture click on div surrounding an iframe
vim javascript omnicomplete
Javascript and defaultValue of hidden input elements
Why can't I write [1,2,3].reduce(Math.max) in Javascript? [duplicate]
Accessing JavaScript class variable inside a class function
Performance: CSS3 animations vs. HTML5 Canvas
d3.js - how to automatically calculate arc lengths in radial dendrogram
Why does jshint complain about linebreak within expression?
AngularJS GlobalCtrl vs $rootScope vs Service
"if debug" in JavaScript?

Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!