ngAnimate (stagger) only animates first element in repeater #7228
Comments
gbbr
changed the title
gbbr
changed the title
|
Which version of Angular are you using? As suggested in StackOverflow have you tried the latest Angular version? |
|
I am using AngularJS 1.2.9 and it is not working, it seems to behave significantly better with 1.2.13. Do check ng-tube as well this is a real issue. This is my styling https://github.com/backslashed/room24/blob/master/styles/sass/_animations.scss I'm 100% sure everything is correct on my side. |
|
Is this issue browser-dependent? |
|
It happens on all browsers 90% of the time. It is less obvious on Safari and most obvious on Chrome, to me it looks like a timing issue. I will continue to study the source code of ngAnimate and will try to help come up with a patch. It's amazing that no one has noticed this so far. To clarify, this happens when you replace the entire data set of the repeater. |
gbbr
changed the title
|
#7547 is related. Working on a fix. |
|
The ng-tube website is using an older version of ngAnimate, so the newer ones fixed it up into a much better state. Although there is an another issue in the comment above. Hopefully once this is fixed then it should be stable. |
|
@Backslashed do you have any other example aside from the one from ng-tube? |
|
@matsko I did, but i've fixed it now by refactoring using TweenMax. The older non-working version of my project is at https://github.com/backslashed/room24/blob/master/app/controllers/CategoryController.js - the SASS / CSS is also there in a different folder. Basically the issue happens when you switch out the contents of the repeater with new items. Hope that helps. P.S. My post on StackOverflow (link in the first comment in this thread) might be of help as well. Good luck :) |
|
@Backslashed sorry, I missed your message about a month ago. Could you possibly help put together a standalone ZIP file containing an app where this effect is easy to reproduce? This is a difficult bug to pin down. |
|
I could fork Angular and write a test case that fails for this scenario. Which file should I put it in? Your tests seem mostly TDD and this would be a BDD test. |
|
P.S. I have provided a very basic example since my first post. Follow the StackOverflow link and look at the first answer. It has 2 demos on plunkr that reproduce the problem. I have mentioned this above. |
…mations When transition-delay and animation-delay were used to drive the staggering animation the result was unpredictable at times due to the browser not being able to register the generated delay styles in time. This caused a hard to track down bug that didn't have a solid solution when styles were being used. This fix ensures that stagger delays are handled by the $timeout service. Closes angular#7547 Closes angular#7228 BREAKING CHANGE If any stagger code consisted of having BOTH transition staggers and delay staggers together then that will not work the same way. Angular will no instead choose the highest stagger delay value and set the timeout to wait for that before applying the active CSS class.
…mations When transition-delay and animation-delay were used to drive the staggering animation the result was unpredictable at times due to the browser not being able to register the generated delay styles in time. This caused a hard to track down bug that didn't have a solid solution when styles were being used. This fix ensures that stagger delays are handled by the $timeout service. Closes angular#7547 Closes angular#7228 BREAKING CHANGE If any stagger code consisted of having BOTH transition staggers and delay staggers together then that will not work the same way. Angular will no instead choose the highest stagger delay value and set the timeout to wait for that before applying the active CSS class.
…mations When transition-delay and animation-delay were used to drive the staggering animation the result was unpredictable at times due to the browser not being able to register the generated delay styles in time. This caused a hard to track down bug that didn't have a solid solution when styles were being used. This fix ensures that stagger delays are handled by the $timeout service. Closes angular#7547 Closes angular#7228 BREAKING CHANGE If any stagger code consisted of having BOTH transition staggers and delay staggers together then that will not work the same way. Angular will no instead choose the highest stagger delay value and set the timeout to wait for that before applying the active CSS class.
|
This should be fixed with #8637. And it already fixes #7547. You can test out the JS files here: |
…mations When transition-delay and animation-delay were used to drive the staggering animation the result was unpredictable at times due to the browser not being able to register the generated delay styles in time. This caused a hard to track down bug that didn't have a solid solution when styles were being used. This fix ensures that stagger delays are handled by the $timeout service. Closes angular#7547 Closes angular#7228 Closes angular#8547 BREAKING CHANGE If any stagger code consisted of having BOTH transition staggers and delay staggers together then that will not work the same way. Angular will no instead choose the highest stagger delay value and set the timeout to wait for that before applying the active CSS class.
…mations When transition-delay and animation-delay were used to drive the staggering animation the result was unpredictable at times due to the browser not being able to register the generated delay styles in time. This caused a hard to track down bug that didn't have a solid solution when styles were being used. This fix ensures that stagger delays are handled by the $timeout service. Closes angular#7228 Closes angular#7547 Closes angular#8297 Closes angular#8547 BREAKING CHANGE If any stagger code consisted of having BOTH transition staggers and delay staggers together then that will not work the same way. Angular will no instead choose the highest stagger delay value and set the timeout to wait for that before applying the active CSS class.
…mations When transition-delay and animation-delay were used to drive the staggering animation the result was unpredictable at times due to the browser not being able to register the generated delay styles in time. This caused a hard to track down bug that didn't have a solid solution when styles were being used. This fix ensures that stagger delays are handled by the $timeout service. Closes angular#7228 Closes angular#7547 Closes angular#8297 Closes angular#8547 BREAKING CHANGE If any stagger code consisted of having BOTH transition staggers and delay staggers together then that will not work the same way. Angular will no instead choose the highest stagger delay value and set the timeout to wait for that before applying the active CSS class.
|
That's awesome man! 👍 |
…mations When transition-delay and animation-delay were used to drive the staggering animation the result was unpredictable at times due to the browser not being able to register the generated delay styles in time. This caused a hard to track down bug that didn't have a solid solution when styles were being used. This fix ensures that stagger delays are handled by the $timeout service. Closes angular#7228 Closes angular#7547 Closes angular#8297 Closes angular#8547 BREAKING CHANGE If any stagger code consisted of having BOTH transition staggers and delay staggers together then that will not work the same way. Angular will no instead choose the highest stagger delay value and set the timeout to wait for that before applying the active CSS class.
…mations When transition-delay and animation-delay were used to drive the staggering animation the result was unpredictable at times due to the browser not being able to register the generated delay styles in time. This caused a hard to track down bug that didn't have a solid solution when styles were being used. This fix ensures that stagger delays are handled by the $timeout service. Closes angular#7228 Closes angular#7547 Closes angular#8297 Closes angular#8547 BREAKING CHANGE If any stagger code consisted of having BOTH transition staggers and delay staggers together then that will not work the same way. Angular will no instead choose the highest stagger delay value and set the timeout to wait for that before applying the active CSS class.
…mations When transition-delay and animation-delay were used to drive the staggering animation the result was unpredictable at times due to the browser not being able to register the generated delay styles in time. This caused a hard to track down bug that didn't have a solid solution when styles were being used. This fix ensures that stagger delays are handled by the $timeout service. Closes angular#7228 Closes angular#7547 Closes angular#8297 Closes angular#8547 BREAKING CHANGE If any stagger code consisted of having BOTH transition staggers and delay staggers together then that will not work the same way. Angular will now instead choose the highest stagger delay value and set the timeout to wait for that before applying the active CSS class.
This issue happens most often on Chrome browser (MacOS in my case). It can be reproduced on http://www.ng-tube.com/#/ by switching between the categories located on the top right.
There is also a StackOverflow entry that shows an example of the issue, as well as a solution. There seem to be differences between 1.2.13 and 1.2.9 (see http://www.stackoverflow.com/questions/23176807/angularjs-only-first-element-in-ng-repeat-animates).
AngularJS is a great framework but the most essential thing (in my opinion) are animations. I've gone through hours of stress trying to pull them off with zero luck.
The text was updated successfully, but these errors were encountered: