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

fix($animateCss): ensure animations execute if only a keyframeStyle is provided #12340

Closed
wants to merge 2 commits into from
Closed

fix($animateCss): ensure animations execute if only a keyframeStyle is provided #12340

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
914dc48
fix($animateCss): ensure animations execute if only a keyframeStyle i…
matsko Jul 14, 2015
3262d45
test($animateCss): ensure that `transitionStyle` by itself doesn't tr…
matsko Jul 14, 2015
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
6 changes: 5 additions & 1 deletion src/ngAnimate/animateCss.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -556,10 +556,14 @@ var $AnimateCssProvider = ['$animateProvider', function($animateProvider) {
var fullClassName = classes + ' ' + setupClasses;
var activeClasses = pendClasses(setupClasses, '-active');
var hasToStyles = styles.to && Object.keys(styles.to).length > 0;
var containsKeyframeAnimation = (options.keyframeStyle || '').length > 0;

// there is no way we can trigger an animation since no styles and
// no classes are being applied which would then trigger a transition
if (!hasToStyles && !setupClasses) {
// is there a raw keyframe value that is applied to the element
Copy link
Contributor

Choose a reason for hiding this comment

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

This comment seems a bit weird in the context of the previous two lines...

Perhaps these three comment lines should read:

// there is no way we can trigger an animation if no styles and
// no classes are being applied which would then trigger a transition,
// unless there a is raw keyframe value that is applied to the element

if (!containsKeyframeAnimation
&& !hasToStyles
&& !setupClasses) {
return closeAndReturnNoopAnimator();
}

Expand Down
42 changes: 41 additions & 1 deletion test/ngAnimate/animateCssSpec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2017,7 +2017,7 @@ describe("ngAnimate $animateCss", function() {
});
});

describe("[transtionStyle]", function() {
describe("[transitionStyle]", function() {
it("should apply the transition directly onto the element and animate accordingly",
inject(function($animateCss, $rootElement) {

Expand Down Expand Up @@ -2092,6 +2092,29 @@ describe("ngAnimate $animateCss", function() {
expect(element.css('transition-property')).toMatch('color');
expect(style).toContain('ease-in');
}));

it("should only execute the animation if any CSS to styles are mixed into together",
Copy link
Contributor

Choose a reason for hiding this comment

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

So this should probably read:

it("should execute the animation only if a CSS `to` style is also mixed in"

right?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

should execute the animation only if there is any provided CSS styling to go with the transition

inject(function($animateCss, $rootElement) {

var options = {
transitionStyle: '6s 4s ease-out all'
};

$animateCss(element, options).start();
triggerAnimationStartFrame();

expect(element.css(prefix + 'transition-delay')).not.toEqual('4s');
expect(element.css(prefix + 'transition-duration')).not.toEqual('6s');
expect(element.css(prefix + 'transition-timing-function')).not.toEqual('ease-out');

options.to = { color: 'brown' };
$animateCss(element, options).start();
triggerAnimationStartFrame();

expect(element.css(prefix + 'transition-delay')).toEqual('4s');
expect(element.css(prefix + 'transition-duration')).toEqual('6s');
expect(element.css(prefix + 'transition-timing-function')).toEqual('ease-out');
}));
});

describe("[keyframeStyle]", function() {
Expand Down Expand Up @@ -2167,6 +2190,23 @@ describe("ngAnimate $animateCss", function() {
expect(element.css(prefix + 'animation-duration')).toEqual('5.5s');
expect(element.css(prefix + 'animation-name')).toEqual('my_animation');
}));

it("should be able to execute the animation if it is the only provided value",
inject(function($animateCss, $rootElement) {

var options = {
keyframeStyle: 'my_animation 5.5s 10s'
};

var animator = $animateCss(element, options);

animator.start();
triggerAnimationStartFrame();

expect(element.css(prefix + 'animation-delay')).toEqual('10s');
expect(element.css(prefix + 'animation-duration')).toEqual('5.5s');
expect(element.css(prefix + 'animation-name')).toEqual('my_animation');
}));
});

describe("[from] and [to]", function() {
Expand Down