Skip to content
This repository was archived by the owner on Apr 12, 2024. It is now read-only.

fix(ngAnimate): class-based animations must set the addClass/removeClass class on the element #11853

Closed
wants to merge 1 commit into from
Closed

fix(ngAnimate): class-based animations must set the addClass/removeClass class on the element #11853

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
28 changes: 14 additions & 14 deletions src/ngAnimate/animateCssDriver.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -226,20 +226,20 @@ var $$AnimateCssDriverProvider = ['$$animationProvider', function($$animationPro
var element = animationDetails.element;
var options = animationDetails.options || {};

options.structural = animationDetails.structural;

// structural animations ensure that the CSS classes are always applied
// before the detection starts.
options.applyClassesEarly = options.structural;

// we special case the leave animation since we want to ensure that
// the element is removed as soon as the animation is over. Otherwise
// a flicker might appear or the element may not be removed until all
// the other animations have completed themselves (which would then
// leave a pending element in the background).
options.event = animationDetails.event;
if (options.event === 'leave') {
options.onDone = options.domOperation;
if (animationDetails.structural) {
// structural animations ensure that the CSS classes are always applied
// before the detection starts.
options.structural = options.applyClassesEarly = true;

// we special case the leave animation since we want to ensure that
// the element is removed as soon as the animation is over. Otherwise
// a flicker might appear or the element may not be removed at all
options.event = animationDetails.event;
if (options.event === 'leave') {
options.onDone = options.domOperation;
}
} else {
options.event = null;
}

var animator = $animateCss(element, options);
Expand Down
19 changes: 19 additions & 0 deletions test/ngAnimate/animateCssDriverSpec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -104,6 +104,14 @@ describe("ngAnimate $$animateCssDriver", function() {
driver({ element: element });
expect(capturedAnimation[1].applyClassesEarly).toBeFalsy();
}));

it("should not provide a `method` as an option value if the animation is not structural", inject(function() {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think we could simplify this by changing it "should only provide ... if the animation is structural". What still confuses me, is that "method" doesn't really reflect what is set. It's really the event (name) that is set, right?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I agree with @Narretz here. Let's change this to:

it("should only set the event name if the animation is structural", inject(function() {

Also the previous it clause should probably change:

it("should signal $animateCss to apply the classes early when animation is structural", inject(function() {

driver({ element: element, structural: true, event: 'superman' });
expect(capturedAnimation[1].event).toBe('superman');

driver({ element: element, event: 'batman' });
expect(capturedAnimation[1].event).toBeFalsy();
}));
});

describe("anchored animations", function() {
Expand Down Expand Up @@ -214,7 +222,9 @@ describe("ngAnimate $$animateCssDriver", function() {
'out': jqLite('<div></div>')
};

fromAnimation.structural = true;
fromAnimation.element.append(anchorAnimation['out']);
toAnimation.structural = true;
toAnimation.element.append(anchorAnimation['in']);

var animator = driver({
Expand All @@ -241,6 +251,9 @@ describe("ngAnimate $$animateCssDriver", function() {
element.addClass(details.event);
};

fromAnimation.structural = true;
toAnimation.structural = true;

var runner = driver({
from: fromAnimation,
to: toAnimation
Expand All @@ -267,6 +280,9 @@ describe("ngAnimate $$animateCssDriver", function() {
});
});
inject(function() {
fromAnimation.structural = true;
toAnimation.structural = true;

var runner = driver({
from: fromAnimation,
to: toAnimation
Expand Down Expand Up @@ -907,8 +923,11 @@ describe("ngAnimate $$animateCssDriver", function() {
it("should pass the provided domOperation into $animateCss to be run right after the element is animated if a leave animation is present",
inject(function($rootElement, $$rAF) {

toAnimation.structural = true;
toAnimation.event = 'enter';
toAnimation.options = {};

fromAnimation.structural = true;
fromAnimation.event = 'leave';
fromAnimation.options = {};

Expand Down