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

Commit b7b06d8

Browse files
matskomatsko
committed
revert: fix($animateCss): respect transition styles already on the element
1 parent de9777d commit b7b06d8

File tree

4 files changed

+44
-119
lines changed

4 files changed

+44
-119
lines changed

‎src/ngAnimate/.jshintrc‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -33,8 +33,6 @@
3333

3434
"TRANSITION_DURATION_PROP": false,
3535
"TRANSITION_DELAY_PROP": false,
36-
"TRANSITION_TIMING_PROP": false,
37-
"TRANSITION_PROPERTY_PROP": false,
3836
"TRANSITION_PROP": false,
3937
"PROPERTY_KEY": false,
4038
"DURATION_KEY": false,

‎src/ngAnimate/animateCss.js‎

Lines changed: 32 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -223,13 +223,12 @@ var ELAPSED_TIME_MAX_DECIMAL_PLACES = 3;
223223
var CLOSING_TIME_BUFFER = 1.5;
224224

225225
var DETECT_CSS_PROPERTIES = {
226-
transitionDuration: TRANSITION_DURATION_PROP,
227-
transitionDelay: TRANSITION_DELAY_PROP,
228-
transitionProperty: TRANSITION_PROP + PROPERTY_KEY,
229-
transitionTimingFunction: TRANSITION_PROP + TIMING_KEY,
230-
animationDuration: ANIMATION_DURATION_PROP,
231-
animationDelay: ANIMATION_DELAY_PROP,
232-
animationIterationCount: ANIMATION_PROP + ANIMATION_ITERATION_COUNT_KEY
226+
transitionDuration: TRANSITION_DURATION_PROP,
227+
transitionDelay: TRANSITION_DELAY_PROP,
228+
transitionProperty: TRANSITION_PROP + PROPERTY_KEY,
229+
animationDuration: ANIMATION_DURATION_PROP,
230+
animationDelay: ANIMATION_DELAY_PROP,
231+
animationIterationCount: ANIMATION_PROP + ANIMATION_ITERATION_COUNT_KEY
233232
};
234233

235234
var DETECT_STAGGER_CSS_PROPERTIES = {
@@ -293,14 +292,14 @@ function truthyTimingValue(val) {
293292
return val === 0 || val != null;
294293
}
295294

296-
function getCssTransitionStyle(timings, duration) {
295+
function getCssTransitionDurationStyle(duration, applyOnlyDuration) {
297296
var style = TRANSITION_PROP;
298297
var value = duration + 's';
299-
300-
value += ' ' + timings[TRANSITION_TIMING_PROP];
301-
value += ' ' + timings[TRANSITION_PROPERTY_PROP];
302-
value += timings[TRANSITION_DELAY_PROP] ? ' ' + timings[TRANSITION_DELAY_PROP] + 's' : '';
303-
298+
if (applyOnlyDuration) {
299+
style += DURATION_KEY;
300+
} else {
301+
value += ' linear all';
302+
}
304303
return [style, value];
305304
}
306305

@@ -556,6 +555,15 @@ var $AnimateCssProvider = ['$animateProvider', function($animateProvider) {
556555
temporaryStyles.push(transitionStyle);
557556
}
558557

558+
if (options.duration >= 0) {
559+
applyOnlyDuration = node.style[TRANSITION_PROP].length > 0;
560+
var durationStyle = getCssTransitionDurationStyle(options.duration, applyOnlyDuration);
561+
562+
// we set the duration so that it will be picked up by getComputedStyle later
563+
applyInlineStyle(node, durationStyle);
564+
temporaryStyles.push(durationStyle);
565+
}
566+
559567
if (options.keyframeStyle) {
560568
var keyframeStyle = [ANIMATION_PROP, options.keyframeStyle];
561569
applyInlineStyle(node, keyframeStyle);
@@ -568,18 +576,8 @@ var $AnimateCssProvider = ['$animateProvider', function($animateProvider) {
568576
: gcsLookup.count(cacheKey)
569577
: 0;
570578

571-
var timings = computeTimings(node, fullClassName, cacheKey);
572-
573-
if (options.duration > 0) {
574-
// Duration in options overwrites duration set in style
575-
timings.transitionDuration = options.duration;
576-
}
577-
578-
var relativeDelay = timings.maxDelay;
579-
maxDelay = Math.max(relativeDelay, 0);
580-
maxDuration = timings.maxDuration;
581-
582579
var isFirst = itemIndex === 0;
580+
583581
// this is a pre-emptive way of forcing the setup classes to be added and applied INSTANTLY
584582
// without causing any combination of transitions to kick in. By adding a negative delay value
585583
// it forces the setup class' transition to end immediately. We later then remove the negative
@@ -590,10 +588,17 @@ var $AnimateCssProvider = ['$animateProvider', function($animateProvider) {
590588
blockTransitions(node, SAFE_FAST_FORWARD_DURATION_VALUE);
591589
}
592590

591+
var timings = computeTimings(node, fullClassName, cacheKey);
592+
var relativeDelay = timings.maxDelay;
593+
maxDelay = Math.max(relativeDelay, 0);
594+
maxDuration = timings.maxDuration;
595+
593596
var flags = {};
594597
flags.hasTransitions = timings.transitionDuration > 0;
595598
flags.hasAnimations = timings.animationDuration > 0;
596-
flags.applyTransitionDuration = options.duration > 0 || hasToStyles && (flags.hasTransitions
599+
flags.hasTransitionAll = flags.hasTransitions && timings.transitionProperty == 'all';
600+
flags.applyTransitionDuration = hasToStyles && (
601+
(flags.hasTransitions && !flags.hasTransitionAll)
597602
|| (flags.hasAnimations && !flags.hasTransitions));
598603
flags.applyAnimationDuration = options.duration && flags.hasAnimations;
599604
flags.applyTransitionDelay = truthyTimingValue(options.delay) && (flags.applyTransitionDuration || flags.hasTransitions);
@@ -606,15 +611,15 @@ var $AnimateCssProvider = ['$animateProvider', function($animateProvider) {
606611
if (flags.applyTransitionDuration) {
607612
flags.hasTransitions = true;
608613
timings.transitionDuration = maxDuration;
609-
temporaryStyles.push(getCssTransitionStyle(timings, maxDuration));
614+
applyOnlyDuration = node.style[TRANSITION_PROP + PROPERTY_KEY].length > 0;
615+
temporaryStyles.push(getCssTransitionDurationStyle(maxDuration, applyOnlyDuration));
610616
}
611617

612618
if (flags.applyAnimationDuration) {
613619
flags.hasAnimations = true;
614620
timings.animationDuration = maxDuration;
615621
temporaryStyles.push(getCssKeyframeDurationStyle(maxDuration));
616622
}
617-
618623
}
619624

620625
if (maxDuration === 0 && !flags.recalculateTimingStyles) {

‎src/ngAnimate/shared.js‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -68,8 +68,6 @@ var ANIMATION_DELAY_PROP = ANIMATION_PROP + DELAY_KEY;
6868
var ANIMATION_DURATION_PROP = ANIMATION_PROP + DURATION_KEY;
6969
var TRANSITION_DELAY_PROP = TRANSITION_PROP + DELAY_KEY;
7070
var TRANSITION_DURATION_PROP = TRANSITION_PROP + DURATION_KEY;
71-
var TRANSITION_TIMING_PROP = TRANSITION_PROP + TIMING_KEY;
72-
var TRANSITION_PROPERTY_PROP = TRANSITION_PROP + PROPERTY_KEY;
7371

7472
var isPromiseLike = function(p) {
7573
return p && p.then ? true : false;

‎test/ngAnimate/animateCssSpec.js‎

Lines changed: 12 additions & 88 deletions
Original file line numberDiff line numberDiff line change
@@ -634,86 +634,6 @@ describe("ngAnimate $animateCss", function() {
634634
keyframeProgress(element, 1, 20);
635635
assertAnimationComplete(true);
636636
}));
637-
638-
it("should apply all transition shorthand properties that are already on the element",
639-
inject(function($animateCss, $rootElement) {
640-
641-
ss.addRule('.action', 'transition: color 1s cubic-bezier(0.25, 0.1, 0.25, 1) 5s;');
642-
element.addClass('action');
643-
644-
var options = {
645-
to: { background: 'blue' }
646-
};
647-
648-
var animator = $animateCss(element, options);
649-
animator.start();
650-
triggerAnimationStartFrame();
651-
652-
expect(element.css('transition-duration')).toMatch('1s');
653-
expect(element.css('transition-delay')).toMatch('5s');
654-
expect(element.css('transition-property')).toMatch('color');
655-
expect(element.css('transition-timing-function')).toBe('cubic-bezier(0.25, 0.1, 0.25, 1)');
656-
}));
657-
658-
it("should apply all explicit transition properties that are already on the element",
659-
inject(function($animateCss, $rootElement) {
660-
661-
ss.addRule('.action', 'transition-duration: 1s;' +
662-
'transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);' +
663-
'transition-property: color;' +
664-
'transition-delay: 5s');
665-
element.addClass('action');
666-
667-
var options = {
668-
to: { background: 'blue' }
669-
};
670-
671-
var animator = $animateCss(element, options);
672-
animator.start();
673-
triggerAnimationStartFrame();
674-
675-
expect(element.css('transition-duration')).toMatch('1s');
676-
expect(element.css('transition-delay')).toMatch('5s');
677-
expect(element.css('transition-property')).toMatch('color');
678-
expect(element.css('transition-timing-function')).toBe('cubic-bezier(0.25, 0.1, 0.25, 1)');
679-
}));
680-
681-
it("should use the default transition-property (spec: all) if none is supplied in shorthand",
682-
inject(function($animateCss, $rootElement) {
683-
684-
ss.addRule('.action', 'transition: 1s ease');
685-
element.addClass('action');
686-
687-
var options = {
688-
to: { background: 'blue' }
689-
};
690-
691-
var animator = $animateCss(element, options);
692-
animator.start();
693-
triggerAnimationStartFrame();
694-
695-
expect(element.css('transition-property')).toBe('all');
696-
}));
697-
698-
it("should use the default easing (spec: ease) if none is supplied in shorthand",
699-
inject(function($animateCss, $rootElement) {
700-
701-
ss.addRule('.action', 'transition: color 1s');
702-
element.addClass('action');
703-
704-
var options = {
705-
to: { background: 'blue' }
706-
};
707-
708-
var animator = $animateCss(element, options);
709-
animator.start();
710-
triggerAnimationStartFrame();
711-
712-
// IE reports ease in cubic-bezier form
713-
expect(element.css('transition-timing-function')).toBeOneOf('ease', 'cubic-bezier(0.25, 0.1, 0.25, 1)');
714-
}));
715-
716-
717637
});
718638

719639
describe("staggering", function() {
@@ -2033,7 +1953,7 @@ describe("ngAnimate $animateCss", function() {
20331953

20341954
var style = element.attr('style');
20351955
expect(style).toContain('3000s');
2036-
expect(element.css('transition-timing-function')).toBeOneOf('ease', 'cubic-bezier(0.25, 0.1, 0.25, 1)');
1956+
expect(style).toContain('linear');
20371957
}));
20381958

20391959
it("should be applied to a CSS keyframe animation directly if keyframes are detected within the CSS class",
@@ -2139,7 +2059,7 @@ describe("ngAnimate $animateCss", function() {
21392059
expect(style).toMatch(/animation(?:-duration)?:\s*4s/);
21402060
expect(element.css('transition-duration')).toMatch('4s');
21412061
expect(element.css('transition-property')).toMatch('all');
2142-
expect(element.css('transition-timing-function')).toBeOneOf('linear', 'cubic-bezier(0, 0, 1, 1)');
2062+
expect(style).toContain('linear');
21432063
}));
21442064
});
21452065

@@ -2303,7 +2223,7 @@ describe("ngAnimate $animateCss", function() {
23032223
var animator = $animateCss(element, options);
23042224

23052225
expect(element.attr('style') || '').not.toContain('animation-delay');
2306-
expect(element.css('transition-delay')).toEqual('-2s');
2226+
expect(element.attr('style') || '').not.toContain('transition-delay');
23072227
expect(classSpy).not.toHaveBeenCalled();
23082228

23092229
//redefine the classSpy to assert that the delay values have been
@@ -2481,9 +2401,10 @@ describe("ngAnimate $animateCss", function() {
24812401
animator.start();
24822402
triggerAnimationStartFrame();
24832403

2404+
var style = element.attr('style');
24842405
expect(element.css('transition-duration')).toMatch('4s');
24852406
expect(element.css('transition-property')).toMatch('color');
2486-
expect(element.css('transition-timing-function')).toBeOneOf('ease-in', 'cubic-bezier(0.42, 0, 1, 1)');
2407+
expect(style).toContain('ease-in');
24872408
}));
24882409

24892410
it("should give priority to the provided delay value, but only update the delay style itself",
@@ -2734,9 +2655,11 @@ describe("ngAnimate $animateCss", function() {
27342655
animator.start();
27352656
triggerAnimationStartFrame();
27362657

2658+
2659+
var style = element.attr('style');
27372660
expect(element.css('transition-duration')).toMatch('2.5s');
27382661
expect(element.css('transition-property')).toMatch('all');
2739-
expect(element.css('transition-timing-function')).toBeOneOf('ease', 'cubic-bezier(0.25, 0.1, 0.25, 1)');
2662+
expect(style).toContain('linear');
27402663
}));
27412664

27422665
it("should remove all inline transition styling when an animation completes",
@@ -2867,7 +2790,7 @@ describe("ngAnimate $animateCss", function() {
28672790
it("should apply a transition duration if the existing transition duration's property value is not 'all'",
28682791
inject(function($animateCss, $rootElement) {
28692792

2870-
ss.addRule('.ng-enter', 'transition: 1s cubic-bezier(0.25, 0.1, 0.25, 1) color');
2793+
ss.addRule('.ng-enter', 'transition: 1s linear color');
28712794

28722795
var emptyObject = {};
28732796
var options = {
@@ -2881,9 +2804,10 @@ describe("ngAnimate $animateCss", function() {
28812804
triggerAnimationStartFrame();
28822805

28832806

2807+
var style = element.attr('style');
28842808
expect(element.css('transition-duration')).toMatch('1s');
2885-
expect(element.css('transition-property')).toMatch('color');
2886-
expect(element.css('transition-timing-function')).toBe('cubic-bezier(0.25, 0.1, 0.25, 1)');
2809+
expect(element.css('transition-property')).toMatch('all');
2810+
expect(style).toContain('linear');
28872811
}));
28882812

28892813
it("should apply a transition duration and an animation duration if duration + styles options are provided for a matching keyframe animation",

0 commit comments

Comments
 (0)