Feat: ng-[event]-prepare class for structural animations (ngIf etc) #13408
Conversation
|
We found a Contributor License Agreement for you (the sender of this pull request) and all commit authors, but as best as we can tell these commits were authored by someone else. If that's the case, please add them to this pull request and have them confirm that they're okay with these commits being contributed to Google. If we're mistaken and you did author these commits, just reply here to confirm. |
|
@petebacondarwin This is a feature that is needed as a workaround for an ngAnimate issue that can't currently be solved in another way. Should we try to get it in before 1.5.0? |
|
Can we include links in the commit messages to the issues and other commits that this is fixing or related to? If it a fix to a bug then it is fine to put it in 1.5.0. It is not clear from the tests how this solve the issue in #12969 - we should have some test or at least a description of the issue and how this PR fixes that in the code and/or commit message. (Or am I just missing that?) |
|
It's not a direct fix, more of a workaround. |
|
@petebacondarwin I've added an example to the issue #12969 (comment) |
|
OK, so we also need docs for this feature, especially explaining how it can be used to fix problems that might appear like #12969. |
|
I'll add some docs for it tomorrow |
|
@petebacondarwin I've added docs, fancy taking a look? |
|
Will do. Later today |
|
LGTM |
Narretz
force-pushed
the
fix-nganimate-12969-clean
branch
from
36bf09d to
21825e5
Compare
|
CLAs look good, thanks! |
…ations The new prepare class is added before the animation is pushed to the queue and removed before the animation runs, i.e. it is immediately available when a structural animation (enter, leave, move) is initialized. The class can be used to apply CSS to explicitly hide these elements to prevent a flash of content before the animation runs. This can happen if a structural animation (such as ng-if) sits at the bottom of a tree which has ng-class animations on the parents. Because child animations are spaced out with requestAnimationFrame, the ng-enter class might not be applied in time, so the ng.if element is briefly visible before its animation starts.
Narretz
force-pushed
the
fix-nganimate-12969-clean
branch
from
21825e5 to
6e18b50
Compare
|
@matsko I've noticed that the prepare classes aren't applied to $animateCss based animations. I guess this expected, as they run outside of the animationQueue? |
With commit cf7f21a, animations were moved to input.js in response to an ng-enter flicker issue with Angular 1.4.x. While the flicker was fixed, new animation bugs arised. Angular 1.4.x added and backported a ng-enter-prepare to avoid this bug. * Remove JS animations for input messages * Use `.ng-enter-prepare` to avoid flicker on Angular 1.4+ * Use `.ng-enter:not(ng-enter-active)` to prepare animations on 1.3+ and below * Update spec tests to use getComputedStyle instead of ngAnimate Fixes #6767, #9543, #9723, #10240 Related: angular/angular.js#13408
With commit cf7f21a, animations were moved to input.js in response to an ng-enter flicker issue with Angular 1.4.x. While the flicker was fixed, new animation bugs arised. Angular 1.4.x added and backported a ng-enter-prepare to avoid this bug. * Remove JS animations for input messages * Use `.ng-enter-prepare` to avoid flicker on Angular 1.4+ * Use `.ng-enter:not(.ng-enter-active)` to prepare animations on 1.3+ and below * Update spec tests to use getComputedStyle instead of ngAnimate Fixes #6767, #9543, #9723, #10240 Related: angular/angular.js#13408
With commit cf7f21a, animations were moved to input.js in response to an ng-enter flicker issue with Angular 1.4.x. While the flicker was fixed, new animation bugs arised. Angular 1.4.x added and backported a ng-enter-prepare to avoid this bug. * Remove JS animations for input messages * Use `.ng-enter-prepare` to avoid flicker on Angular 1.4+ * Use `.ng-enter:not(.ng-enter-active)` to prepare animations on 1.3 and below * Update spec tests to use getComputedStyle instead of ngAnimate Fixes #6767, #9543, #9723, #10240 Related: angular/angular.js#13408
With commit cf7f21a, animations were moved to input.js in response to an ng-enter flicker issue with Angular 1.4.x. While the flicker was fixed, new animation bugs arised. Angular 1.4.x added and backported a ng-enter-prepare to avoid this bug. * Use `.ng-enter-prepare` to avoid flicker on Angular 1.4+ * Use `.ng-enter:not(.ng-enter-active)` to prepare animations on 1.3 and below Fixes #6767, #9543, #9723, #10240 Related: angular/angular.js#13408
With commit cf7f21a, animations were moved to input.js in response to an ng-enter flicker issue with Angular 1.4.x. While the flicker was fixed, new animation bugs arised. Angular 1.4.x added and backported a ng-enter-prepare to avoid this bug. * Use `.ng-enter-prepare` to avoid flicker on Angular 1.4+ * Use `.ng-enter:not(.ng-enter-active)` to prepare animations on 1.3 and below * Update spec tests to use computedStyle Fixes #6767, #9543, #9723, #10240 Related: angular/angular.js#13408
A fix / workaround for #12969
We currently don't have any place in the docs that documents the classes ngAnimate adds. At least I can't find it .:o I think it got lost during 1.4. We should add it back so people can find this feature easier.
Idea by @matsko