Skip to content
This repository was archived by the owner on Apr 12, 2024. It is now read-only.
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.

Commit 914dc48

Browse files
committedJul 14, 2015
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 #12124 Closes #12340
1 parent 4cef752 commit 914dc48

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)
This repository has been archived.