Skip to content

Commit 4fabe85

Browse files
tolyotolyo
committed
Clean up animation props
1 parent 29dd33f commit 4fabe85

File tree

3 files changed

+27
-76
lines changed

3 files changed

+27
-76
lines changed

‎@types/animations/shared.d.ts‎

Lines changed: 0 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -83,19 +83,4 @@ export const ACTIVE_CLASS_SUFFIX: "-active";
8383
export const PREPARE_CLASS_SUFFIX: "-prepare";
8484
export const NG_ANIMATE_CLASSNAME: "ng-animate";
8585
export const NG_ANIMATE_CHILDREN_DATA: "$$ngAnimateChildren";
86-
export const TRANSITION_PROP: "transition";
87-
export const TRANSITIONEND_EVENT: "transitionend";
88-
export const ANIMATION_PROP: "animation";
89-
export const ANIMATIONEND_EVENT: "animationend";
90-
export const DURATION_KEY: "Duration";
91-
export const PROPERTY_KEY: number;
92-
export const DELAY_KEY: "Delay";
93-
export const TIMING_KEY: "TimingFunction";
94-
export const ANIMATION_ITERATION_COUNT_KEY: "IterationCount";
95-
export const ANIMATION_PLAYSTATE_KEY: "PlayState";
96-
export const SAFE_FAST_FORWARD_DURATION_VALUE: 9999;
97-
export const ANIMATION_DELAY_PROP: string;
98-
export const ANIMATION_DURATION_PROP: string;
99-
export const TRANSITION_DELAY_PROP: string;
100-
export const TRANSITION_DURATION_PROP: string;
10186
export const ngMinErr: (arg0: string, ...arg1: any[]) => Error;

‎src/animations/animate-css.js‎

Lines changed: 26 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -15,21 +15,8 @@ import { AnimateRunner } from "./runner/animate-runner.js";
1515
import {
1616
ACTIVE_CLASS_SUFFIX,
1717
ADD_CLASS_SUFFIX,
18-
ANIMATIONEND_EVENT,
19-
ANIMATION_DELAY_PROP,
20-
ANIMATION_DURATION_PROP,
21-
ANIMATION_ITERATION_COUNT_KEY,
22-
ANIMATION_PROP,
23-
DURATION_KEY,
2418
EVENT_CLASS_PREFIX,
25-
PROPERTY_KEY,
2619
REMOVE_CLASS_SUFFIX,
27-
SAFE_FAST_FORWARD_DURATION_VALUE,
28-
TIMING_KEY,
29-
TRANSITIONEND_EVENT,
30-
TRANSITION_DELAY_PROP,
31-
TRANSITION_DURATION_PROP,
32-
TRANSITION_PROP,
3320
applyAnimationClassesFactory,
3421
applyAnimationFromStyles,
3522
applyAnimationStyles,
@@ -46,34 +33,34 @@ const ANIMATE_TIMER_KEY = $injectTokens._animateCss;
4633

4734
const ONE_SECOND = 1000;
4835

36+
const SAFE_FAST_FORWARD_DURATION_VALUE = 9999;
37+
4938
const ELAPSED_TIME_MAX_DECIMAL_PLACES = 3;
5039

5140
const CLOSING_TIME_BUFFER = 1.5;
5241

5342
const DETECT_CSS_PROPERTIES = {
54-
transitionDuration: TRANSITION_DURATION_PROP,
55-
transitionDelay: TRANSITION_DELAY_PROP,
56-
transitionProperty: TRANSITION_PROP + PROPERTY_KEY,
57-
animationDuration: ANIMATION_DURATION_PROP,
58-
animationDelay: ANIMATION_DELAY_PROP,
59-
animationIterationCount: ANIMATION_PROP + ANIMATION_ITERATION_COUNT_KEY,
43+
transitionDuration: "transitionDuration",
44+
transitionDelay: "transitionDelay",
45+
transitionProperty: "transitionProperty",
46+
animationDuration: "animationDuration",
47+
animationDelay: "animationDelay",
48+
animationIterationCount: "animationIterationCount",
6049
};
6150

6251
const DETECT_STAGGER_CSS_PROPERTIES = {
63-
transitionDuration: TRANSITION_DURATION_PROP,
64-
transitionDelay: TRANSITION_DELAY_PROP,
65-
animationDuration: ANIMATION_DURATION_PROP,
66-
animationDelay: ANIMATION_DELAY_PROP,
52+
transitionDuration: "transitionDuration",
53+
transitionDelay: "transitionDelay",
54+
animationDuration: "animationDuration",
55+
animationDelay: "animationDelay",
6756
};
6857

6958
function getCssKeyframeDurationStyle(duration) {
70-
return [ANIMATION_DURATION_PROP, `${duration}s`];
59+
return ["animationDuration", `${duration}s`];
7160
}
7261

7362
function getCssDelayStyle(delay, isKeyframeAnimation) {
74-
const prop = isKeyframeAnimation
75-
? ANIMATION_DELAY_PROP
76-
: TRANSITION_DELAY_PROP;
63+
const prop = isKeyframeAnimation ? "animationDelay" : "transitionDelay";
7764

7865
return [prop, `${delay}s`];
7966
}
@@ -128,12 +115,12 @@ function truthyTimingValue(val) {
128115
}
129116

130117
function getCssTransitionDurationStyle(duration, applyOnlyDuration) {
131-
let style = TRANSITION_PROP;
118+
let style = "transition";
132119

133120
let value = `${duration}s`;
134121

135122
if (applyOnlyDuration) {
136-
style += DURATION_KEY;
123+
style += "Duration";
137124
} else {
138125
value += " linear all";
139126
}
@@ -445,14 +432,14 @@ export function AnimateCssProvider() {
445432
let applyOnlyDuration;
446433

447434
if (options.transitionStyle) {
448-
const transitionStyle = [TRANSITION_PROP, options.transitionStyle];
435+
const transitionStyle = ["transition", options.transitionStyle];
449436

450437
applyInlineStyle(node, transitionStyle);
451438
temporaryStyles.push(transitionStyle);
452439
}
453440

454441
if (options.duration >= 0) {
455-
applyOnlyDuration = node.style[TRANSITION_PROP].length > 0;
442+
applyOnlyDuration = node.style.transition.length > 0;
456443
const durationStyle = getCssTransitionDurationStyle(
457444
options.duration,
458445
applyOnlyDuration,
@@ -465,7 +452,7 @@ export function AnimateCssProvider() {
465452
}
466453

467454
if (options.keyframeStyle) {
468-
const keyframeStyle = [ANIMATION_PROP, options.keyframeStyle];
455+
const keyframeStyle = ["animation", options.keyframeStyle];
469456

470457
applyInlineStyle(node, keyframeStyle);
471458
temporaryStyles.push(keyframeStyle);
@@ -523,8 +510,7 @@ export function AnimateCssProvider() {
523510
if (flags.applyTransitionDuration) {
524511
flags.hasTransitions = true;
525512
timings.transitionDuration = maxDuration;
526-
applyOnlyDuration =
527-
node.style[TRANSITION_PROP + PROPERTY_KEY].length > 0;
513+
applyOnlyDuration = node.style.transitionProperty.length > 0;
528514
temporaryStyles.push(
529515
getCssTransitionDurationStyle(maxDuration, applyOnlyDuration),
530516
);
@@ -896,24 +882,24 @@ export function AnimateCssProvider() {
896882
const easeVal = options.easing;
897883

898884
if (flags.hasTransitions) {
899-
easeProp = TRANSITION_PROP + TIMING_KEY;
885+
easeProp = "transitionTimingFunction";
900886
temporaryStyles.push([easeProp, easeVal]);
901887
node.style[easeProp] = easeVal;
902888
}
903889

904890
if (flags.hasAnimations) {
905-
easeProp = ANIMATION_PROP + TIMING_KEY;
891+
easeProp = "animationTimingFunction";
906892
temporaryStyles.push([easeProp, easeVal]);
907893
node.style[easeProp] = easeVal;
908894
}
909895
}
910896

911897
if (timings.transitionDuration) {
912-
events.push(TRANSITIONEND_EVENT);
898+
events.push("transitionend");
913899
}
914900

915901
if (timings.animationDuration) {
916-
events.push(ANIMATIONEND_EVENT);
902+
events.push("animationend");
917903
}
918904

919905
startTime = Date.now();
@@ -993,7 +979,7 @@ function blockTransitions(node, duration) {
993979
// same element which makes this safe for class-based animations
994980
const value = duration ? `-${duration}s` : "";
995981

996-
applyInlineStyle(node, [TRANSITION_DELAY_PROP, value]);
982+
applyInlineStyle(node, ["transitionDelay", value]);
997983

998-
return [TRANSITION_DELAY_PROP, value];
984+
return ["transitionDelay", value];
999985
}

‎src/animations/shared.js‎

Lines changed: 1 addition & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,6 @@ import {
66
keys,
77
minErr,
88
} from "../shared/utils.js";
9-
import { ASTType } from "../core/parse/ast-type.js";
109
import { NodeType } from "../shared/node.js";
1110

1211
export const ADD_CLASS_SUFFIX = "-add";
@@ -18,25 +17,6 @@ export const PREPARE_CLASS_SUFFIX = "-prepare";
1817
export const NG_ANIMATE_CLASSNAME = "ng-animate";
1918
export const NG_ANIMATE_CHILDREN_DATA = "$$ngAnimateChildren";
2019

21-
// Detect proper transitionend/animationend event names.
22-
export const TRANSITION_PROP = "transition";
23-
export const TRANSITIONEND_EVENT = "transitionend";
24-
export const ANIMATION_PROP = "animation";
25-
export const ANIMATIONEND_EVENT = "animationend";
26-
27-
export const DURATION_KEY = "Duration";
28-
export const PROPERTY_KEY = ASTType._Property;
29-
export const DELAY_KEY = "Delay";
30-
export const TIMING_KEY = "TimingFunction";
31-
export const ANIMATION_ITERATION_COUNT_KEY = "IterationCount";
32-
export const ANIMATION_PLAYSTATE_KEY = "PlayState";
33-
export const SAFE_FAST_FORWARD_DURATION_VALUE = 9999;
34-
35-
export const ANIMATION_DELAY_PROP = ANIMATION_PROP + DELAY_KEY;
36-
export const ANIMATION_DURATION_PROP = ANIMATION_PROP + DURATION_KEY;
37-
export const TRANSITION_DELAY_PROP = TRANSITION_PROP + DELAY_KEY;
38-
export const TRANSITION_DURATION_PROP = TRANSITION_PROP + DURATION_KEY;
39-
4020
export const ngMinErr = minErr("ng");
4121
export function assertArg(arg, name, reason) {
4222
if (!arg) {
@@ -352,7 +332,7 @@ export function clearGeneratedClasses(element, options) {
352332
export function blockKeyframeAnimations(node, applyBlock) {
353333
const value = applyBlock ? "paused" : "";
354334

355-
const key = ANIMATION_PROP + ANIMATION_PLAYSTATE_KEY;
335+
const key = `animationPlayState`;
356336

357337
applyInlineStyle(node, [key, value]);
358338

0 commit comments

Comments
 (0)