Skip to content

Commit 768794b

Browse files
committed
fix($animateCss): ensure animations execute if only a keyframeStyle is provided
`$animateCss` is a fan of transition animations, but it turns out that if only a keyframeStyle is provided into the animation upon constrution then it will quit because it assumes that nothing will be animated (since no classes or styles are being applied). This patch ensures that a keyframe style can solely be applied to an animation triggered with `$animateCss`. ```js // this will now work as expected $animateCss(element, { keyframeStyle: '1s rotate' }).start(); ``` Closes angular#12124
1 parent 4cef752 commit 768794b

File tree

2 files changed

+19
-1
lines changed

2 files changed

+19
-1
lines changed

src/ngAnimate/animateCss.js

+2-1
Original file line numberDiff line numberDiff line change
@@ -556,10 +556,11 @@ var $AnimateCssProvider = ['$animateProvider', function($animateProvider) {
556556
var fullClassName = classes + ' ' + setupClasses;
557557
var activeClasses = pendClasses(setupClasses, '-active');
558558
var hasToStyles = styles.to && Object.keys(styles.to).length > 0;
559+
var containsKeyframeAnimation = (options.keyframeStyle || '').length > 0;
559560

560561
// there is no way we can trigger an animation since no styles and
561562
// no classes are being applied which would then trigger a transition
562-
if (!hasToStyles && !setupClasses) {
563+
if (!containsKeyframeAnimation && !hasToStyles && !setupClasses) {
563564
return closeAndReturnNoopAnimator();
564565
}
565566

test/ngAnimate/animateCssSpec.js

+17
Original file line numberDiff line numberDiff line change
@@ -2167,6 +2167,23 @@ describe("ngAnimate $animateCss", function() {
21672167
expect(element.css(prefix + 'animation-duration')).toEqual('5.5s');
21682168
expect(element.css(prefix + 'animation-name')).toEqual('my_animation');
21692169
}));
2170+
2171+
it("should be able to execute the animation if it is the only provided value",
2172+
inject(function($animateCss, $rootElement) {
2173+
2174+
var options = {
2175+
keyframeStyle: 'my_animation 5.5s 10s'
2176+
};
2177+
2178+
var animator = $animateCss(element, options);
2179+
2180+
animator.start();
2181+
triggerAnimationStartFrame();
2182+
2183+
expect(element.css(prefix + 'animation-delay')).toEqual('10s');
2184+
expect(element.css(prefix + 'animation-duration')).toEqual('5.5s');
2185+
expect(element.css(prefix + 'animation-name')).toEqual('my_animation');
2186+
}));
21702187
});
21712188

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

0 commit comments

Comments
 (0)