As far as I have seen, there are no support for animations in the current (v0.9.0) Angular Material Design library. It's neither documented at official docs. Although it is explained breafly at Google Material Design apecification.
So, how should we go ahead implementing animations, and in particular state trantitions, with Angular? I believe that there are different alternatives such as use of CSS, JQuery, ++ but what direction should we aim for?
Angular Material doesn't aim to provide any animations. It provides css classes that you can use to "link" your own animations to (enter/leave classes).
Also the official angular page to animation states:
Animations in AngularJS are completely based on CSS classes.
So probably this should be the way to go. Also because regarding animations nowadays you can do almost everything with pure CSS (no js needed).
As far as I read, many use animate.css in combination with Angular Material.
Related
I want to apply angular-material in my recent project, but I am afraid that it will be very difficult to find other components which are not available currently. Like treeview, date/time picker, carousel and so on...
How can I deal with these things? any opinions?
I've just tried to use Angular-Material in a site with an existing style, and found a number of issues that I wasn't able to resolve:
- Site UI was feeling very sluggish
- There was a paralax script that became extremely slow and lagged when there was a quick scroll.
- Odd behavior with fonts when it loaded (when I re-sized the screen and back again it was working again) in chrome.
This became a real issue - for the most part it doesn't feel complete. I was really hoping for something like Material-UI, which appears to rely on React.
However, I have come across this https://fezvrasta.github.io/bootstrap-material-design/bootstrap-elements.html which appears to be suitable and works with bootstrap.
There's a really good answer : Using Bootstrap for Angular and Material design for Angular together for some of the issues you will face when using Material with bootstrap.
Also, I tested on a mobile phone and the site was terrible (in performance), you'd never want to get site up with that type of performance.
Also, there's lumx if you want angularjs support (e.g directives etc...). My other issue with lumx and angularjs material is that swapping over libraries is not an easy task. I'm not sure whether this is the norm, and heading this way in the future - but I'm from the Jquery days where my markup remained consistent and I can activate features. However, both lumx and angularjs material require specific tags which means that swapping over libraries requires me to edit my mark-up.
Maybe here is another view of using Angular Material.
I have been using Angular Material as the only web component for my work projects. Angular Material is still in beta version, and like you said, many components such as table, color picker, and sidenav are still missing. If you have to use those components in your projects and not able to implement yours, Angular Material may not be a right choice. Something like Angular-UI or Polymer is probably what you are looking for.
The reason we choose Angular Material at work rather than other nearly complete web component library/collection is because it is being very actively maintained. Currently there are 900+ open issues and lots of pull requests are still going on. For me, a complete version will be more guaranteed. Treeview, date/time/color picker, table these kinds of components are already in the open issues. Here you can search for it.
https://github.com/angular/material/issues
Currently we will find workaround or overwrite the material to solve problems. Or we will open issues if there is no solution. And again, it is still in beta version, you should decide whether you want to use it in your project. But you can definitely look at their available components to determine if Angular Material is a right choice for you.
https://material.angularjs.org/latest/#/
I see many material elements both in Polymer and AngularJS Material. As I know, both of them are google's products about Material design, Are there any relationships between them? Are there any plans for Material for Angular v2?
Material design is a new design language spec that many frameworks, widget libraries, and 3rd authors can adopt and implement.
Polymer is the reference implementation of material design for the web. As an added bonus, turns out web components lend themselves extremely well to the design/patterns of material design (css scoping, compartmentalization, declarative, etc.)
Polymer.dart is simply a Dart port of Polymer. Since it's a port, the paper-* (material design) elements should be very similar to their JS counterparts. Ideally, there would be no port of the elements themselves, but true dart/js interop is lacking right now.
Angular has their own interpretation of the material design spec. Not sure how closely it adheres to the spec.
I'm following angular docs about animations and the approach is like that:
html
<div ngview class="animate">
css
.animate.ng-enter{
...
}
.animate.ng-leave{
...
}
But following this page, the aproach for the same case is something like that:
html
<div ngview ng-animate="'animate'">
css
.animate-enter{
...
}
.animate-leave{
...
}
I would to know the difference about these two approaches, about "best practice", performance and everything...
From what I understand the second page you have listed is just a wrapper for ngAnimation into a directive. I am not even sure if this is official and if is kept up to date with latest angular releases (especially 1.2).
Update: ngAnimate reading through the page on yearofmoo I found this that I think answers your question:
> One of the major reasons why the ngAnimate directive was removed was
because it was difficult to integrate 3rd-party CSS animation
libraries into your code. A good example is with the animate.css
library, which, to make it work with ngAnimate, you would have to
hardcode the combination of CSS classes into the ngAnimate attribute
for each event that takes place. This would be much easier with a
driver or module that you load into your application and boom things
are working.
I think you should be more concerned on where you would like to write your animations (eg CSS3 vs JS) and go with the mainstream way.
You can find a good up to date guide on yearofmoo explaining the different approaches.
You can also watch egghead.io lessons 48-50
Using the directive ng-animate is deprecated: the best practice is that all animations are done by adding classes to elements, as in your first example and link to the Angular docs. A fairly comprehensive guide is available at Year of Moo.
One point to make is that you can still use this to use custom animations defined in javascript. See the Year of Moo article for more information, but they start off as:
myApp.animation('.animate',....
This would be used in cases where you need to support older IE (that doesn't support various CSS transitions/animations), you might want to use a transition from an existing Javascript library, or you might have something very simple Javascript behaviour that still should be treated like an animation (say, adding a class for a few seconds, and then removing it). It's actually a fairly powerful method that allows you to (ab)use Javascript for visual niceties, but keeps it extremely separate from any other logic.
There are three approaches to create animation, css transition, keyframe and JS animation. each has their own pros and cons. You can read this nice article for a comprehensive understandings.
Remastered Animation in AngularJS 1.2 - yearofmoo.com : http://www.yearofmoo.com/2013/08/remastered-animation-in-angularjs-1-2.html
I am writing a module in angularjs which would mainly support IE 8 and 9.
Now the animation directives available in the lib uses mainly CSS transitions and it fails. So I am planning to write Javascript based animations by using angular js directives and develop basic animations like collapse, disappear etc.
What should be the approach for this?
Check great examples on Year Of Moo website. They were really helpful for me.
I have a project which should use both AngularJS and Bootstrap(http://getbootstrap.com/) to take Alert and Process Indicator there.
But when I include Bootstrap's css file it mixes Application so, that other css file's definings seems to be overridden.
How these two Frameworks should be used in same Application?
I have tried almost everything I know but haven't succeeded to combine these two in the same application.
Best regards,
DONT. Bootstrap is based on a jQuery powered mentality, that is fundamentally componentized as isolated state machines of DOM manipulation. Angular is based on a radically different thought process based around Angular $digestion, and HTML compilation.
If you must combine them, do CSS ONLY. Having two sets of state machines with an adapter introduces overhead and room for human error that does not need to exist. I recommend writing your own angular directives that take advantage of Bootstraps CSS, but NOT trying to integrate the two in one application on the JS level.
There are already a few projects out there trying to do this via directives, which is a good idea. I recommend going with a bootstrap directive project that does not depend on jQuery and is a native Angular implementation, rather than adapting Bootstrap's jQuery code into Angular.
NOT this one : https://github.com/mgcrea/angular-strap/blob/master/src/directives/button.js
BUT this one : http://angular-ui.github.io/bootstrap/
or write your
own!
UPDATE There is now a pure angular version of bootstrap. Find it here -> http://mgcrea.github.io/angular-strap/
There is a separate branch for bootstrap 3.0 which contains the updated templates. It seems to be working with Bootstrap 3.0 CSS: http://github.com/angular-ui/bootstrap/tree/bootstrap3_bis2.
Quote from https://stackoverflow.com/users/1232563/calm on this question Bootstrap 3 compatible with current AngularJS bootstrap directives?