I have a list repeated in DOM with ng-repeat. The rows have transition property defined on them in CSS. At times after some manipulation to the repeated list, stale nodes remain in the DOM which look like following:
These have animation classes (ng-animate, ng-leave etc) on them so it looks like animation is in progress on them. And when I hover on those nodes, they go away immediately.
Anyone facing such issue?
Edit
This was a bug in angular which has been solved in 1.2.15.
https://github.com/angular/angular.js/issues/6748
Solved now :)
This was a bug in angular-animate module which has been solved in 1.2.15.
https://github.com/angular/angular.js/issues/6748
For the curious, this was the fix: https://github.com/angular/angular.js/commit/ff5cf736e5b8073c8121295743873ccd04cc7d6b
Related
I'm using Angular 2 - RC3.
My problem is, I have an item which is shown or hidden using a *ngIf.
When the item is getting shown or hidden I want to apply an animation.
I'am able to apply an animation when the item first shows simply by adding a class. But the problem is when it's getting removed, the item gets removed from the screen before the animation can start/finish.
I know you can overcome this by setting a timer to delay removing action so that the animation can finish. But I don't want to put timers everywhere I need this functionality.
Is there an easier way in Angular to achieve this?
I don't want to use JQuery is either.
Use [hidden] directive on your element, as it does not prevent the element from rendering like *ngIf does.
[hidden] mean it takes up space in your DOM document but it's display is set to : none !important.
*ngIf on the other hand removes the element from the DOM completly
I'm using Angular Material 1.0.1 library, but I don't want DOM elements' removal to be delayed when using ng-repeat. When the dataset changes, elements stick around for a little bit more and it looks like the page is lagging.
I found out that disabling all animations with $animate.enabled(false) fixes that problem, but still I want some animations, such as for $mdToast to be shown.
How to disable animations only for changes in dataset for ng-repeat?
After doing some research, I think I found my answer.
AngularJS's animations are built to work with CSS transition rules, so I just made the objects disappear with CSS as soon as they were being "animated out".
.repeated .ng-leave {
display: none;
}
This approach works, but still attaches unnecessary animation classes to new objects, which might affect performance. Any suggestions on how to fix this are welcome.
As you already found out, you can use $animate. There is a function that takes the element as argument, so you don't have to disable it globally: $animate.enabled([element], [enabled]);
It should be pretty easy to write a directive which disables the animations on the directive's element.
Alternatively you can probably configure the $animateProvider with $animateProvider.classNameFilter([expression]); to exclude elements with a certain CSS class, the parameter is a RegExp - so something like /^(?:(?!repeated).)*$/ may work (not tested).
If you are after performance then the second approach is probably what you are after. From the docs:
Sets and/or returns the CSS class regular expression that is checked when performing an animation. Upon bootstrap the classNameFilter value is not set at all and will therefore enable $animate to attempt to perform an animation on any element that is triggered. When setting the classNameFilter value, animations will only be performed on elements that successfully match the filter expression. This in turn can boost performance for low-powered devices as well as applications containing a lot of structural operations.
I am using UI router in an angular application where basic animations of views using ng-enter(-active) and ng-leave(-active) classes are not enough. I have already used $stateChangeStart event in an app before to scroll up before the statechange but I would like to work with the ui-views even more.
Therefore I tried to find out how the statechange process affects ui-view elements in DOM, but somehow I can't find what I am looking for.
The process I researched fires events in following order: stateChangeStart > viewContentLoading > stateChangeSuccess > viewContentLoaded. Unfortunately when I look at the DOM (using Chome dev console), only during the last breakpoint (viewContentLoaded) there are both ui-views in DOM (the "fromState ui-view" and the "toState ui-view").
I've been thinking of fading the former ui-view element, doing some other stuff and then fading the new ui-view element in so I was looking for an event where only the former ui-view exists, then both and then only the new. This way it seems to me that I should perform all the animations inside the viewContentLoaded callback which seems inappropriate.
Am I missing something in the whole concept or is there another events or approaches to this? Thanks in advance for any hints or links...
I wrote a directive which displays a list of elements. After list change the old list moves to the left followed by the new one. To achieve this behavior use ng-repeat directive and css3 transitions. I noticed that animations classes(ng-animate ng-enter ng-animate-start ng-animate-active ng-enter-active) are not beeing removed after animation end and the old node ceated by ng-repeat loop is also not removed.
Example in plunker: http://plnkr.co/edit/gqRIIUJF55NNvlt9lqMz?p=preview
The problem occurs in firefox. Under chrome everything is fine.
I would be grateful if you tell me what I'm doing wrong, or if it is a angular issue.
That's because the ng-animate/ng-animate-start... are removed since angularjs v1.2.0 so you don't need to use them, check the docs or this example by kevin-smets.
Getting into ngAnimations; I was wondering how page transition could completely be controlled.
I mean by this : being able to control the same way an ng-leave as it is done for the ng-enter while having a change in the url in the process. New to angular but I'd described it as trying to get some ng-leave control before an ng-view change.
As far as I've searched, the ng-leave state only has a meaning with ng-switch (there is another ng but you got the idea); which for the moment means for me that all the elements have to be already in the page and that no url change are involved in the process.
If any help, highly appreciated. I've found the ng-animations really cool but thinking that this point is quite missing.
Assuming there might be another pattern to follow probably though.
Have you read:
Animation in AngularJS
http://www.yearofmoo.com/2013/04/animation-in-angularjs.html
Enhanced Animation in AngularJS
http://www.yearofmoo.com/2013/05/enhanced-animations-in-angularjs.html
Remastered Animation in AngularJS 1.2
http://www.yearofmoo.com/2013/08/remastered-animation-in-angularjs-1-2.html
I have found these useful.