fix(animation): add property conversions for CSS Animations (#20252)

fixes #20251
ionic-team · Jan 21, 2020 · 32a7401 · 32a7401
1 parent 34bfc62
commit 32a7401
Show file tree

Hide file tree

Showing 6 changed files with 40 additions and 19 deletions.
diff --git a/core/src/components/modal/animations/ios.enter.ts b/core/src/components/modal/animations/ios.enter.ts
@@ -43,8 +43,8 @@ export const iosEnterAnimation = (
       .beforeAddWrite(() => bodyEl.style.setProperty('background-color', 'black'))
       .addElement(presentingEl)
       .keyframes([
-        { offset: 0, transform: 'translateY(0px) scale(1)', 'border-radius': '0px' },
-        { offset: 1, transform: finalTransform, 'border-radius': '10px 10px 0 0' }
+        { offset: 0, transform: 'translateY(0px) scale(1)', borderRadius: '0px' },
+        { offset: 1, transform: finalTransform, borderRadius: '10px 10px 0 0' }
       ]);
 
     baseAnimation.addAnimation(presentingAnimation);

diff --git a/core/src/components/modal/animations/ios.leave.ts b/core/src/components/modal/animations/ios.leave.ts
@@ -44,8 +44,8 @@ export const iosLeaveAnimation = (
         }
       })
       .keyframes([
-        { offset: 0, transform: `translateY(${modalTransform}) scale(${currentPresentingScale})`, 'border-radius': '10px 10px 0 0' },
-        { offset: 1, transform: 'translateY(0px) scale(1)', 'border-radius': '0px' }
+        { offset: 0, transform: `translateY(${modalTransform}) scale(${currentPresentingScale})`, borderRadius: '10px 10px 0 0' },
+        { offset: 1, transform: 'translateY(0px) scale(1)', borderRadius: '0px' }
       ]);
 
     baseAnimation.addAnimation(presentingAnimation);

diff --git a/core/src/utils/animation/animation-utils.ts b/core/src/utils/animation/animation-utils.ts
@@ -7,21 +7,30 @@ import { AnimationKeyFrames } from './animation-interface';
 export const processKeyframes = (keyframes: AnimationKeyFrames) => {
   keyframes.forEach(keyframe => {
     for (const key in keyframe) {
-      if (keyframe.hasOwnProperty(key) && key.includes('-')) {
+      if (keyframe.hasOwnProperty(key)) {
         const value = keyframe[key];
-        const newKey = convertHyphenToCamelCase(key);
 
-        keyframe[newKey] = value;
-        delete keyframe[key];
+        if (key === 'easing') {
+          const newKey = 'animation-timing-function';
+          keyframe[newKey] = value;
+          delete keyframe[key];
+        } else {
+          const newKey = convertCamelCaseToHypen(key);
+
+          if (newKey !== key) {
+            keyframe[newKey] = value;
+            delete keyframe[key];
+          }
+        }
       }
     }
   });
 
   return keyframes;
 };
 
-const convertHyphenToCamelCase = (str: string) => {
-  return str.replace(/-([a-z])/ig, g => g[1].toUpperCase());
+const convertCamelCaseToHypen = (str: string) => {
+  return str.replace(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase();
 };
 
 let animationPrefix: string | undefined;

diff --git a/core/src/utils/animation/animation.ts b/core/src/utils/animation/animation.ts
@@ -494,9 +494,10 @@ export const createAnimation = (animationId?: string): Animation => {
   const initializeCSSAnimation = (toggleAnimationName = true) => {
     cleanUpStyleSheets();
 
+    const processedKeyframes = processKeyframes(_keyframes);
     elements.forEach(element => {
-      if (_keyframes.length > 0) {
-        const keyframeRules = generateKeyframeRules(_keyframes);
+      if (processedKeyframes.length > 0) {
+        const keyframeRules = generateKeyframeRules(processedKeyframes);
         keyframeName = (animationId !== undefined) ? animationId : generateKeyframeName(keyframeRules);
         const stylesheet = createKeyframeStylesheet(keyframeName, keyframeRules, element);
         stylesheets.push(stylesheet);
@@ -526,10 +527,8 @@ export const createAnimation = (animationId?: string): Animation => {
   };
 
   const initializeWebAnimation = () => {
-    const processedKeyframes = processKeyframes(_keyframes);
-
     elements.forEach(element => {
-      const animation = element.animate(processedKeyframes, {
+      const animation = element.animate(_keyframes, {
         id,
         delay: getDelay(),
         duration: getDuration(),

diff --git a/core/src/utils/animation/test/animation.spec.ts b/core/src/utils/animation/test/animation.spec.ts
@@ -1,4 +1,5 @@
 import { createAnimation } from '../animation';
+import { processKeyframes } from '../animation-utils';
 import { getTimeGivenProgression } from '../cubic-bezier';
 import { Animation } from '../animation-interface';
 
@@ -82,6 +83,18 @@ describe('Animation Class', () => {
 
       expect(animation.getKeyframes().length).toEqual(3);
     });
+
+    it('should convert properties for CSS Animations', () => {
+      const processedKeyframes = processKeyframes([
+        { borderRadius: '0px', easing: 'ease-in' , offset: 0 },
+        { borderRadius: '4px', easing: 'ease-out', offset: 1 }
+      ]);
+
+      expect(processedKeyframes).toEqual([
+        { 'border-radius': '0px', 'animation-timing-function': 'ease-in', offset: 0 },
+        { 'border-radius': '4px', 'animation-timing-function': 'ease-out', offset: 1 }
+      ]);
+    });
 
     it('should set the from keyframe properly', () => {
       animation

diff --git a/core/src/utils/animation/test/basic/index.html b/core/src/utils/animation/test/basic/index.html
@@ -29,10 +29,10 @@
       .iterations(2)
       .easing('linear')
       .keyframes([
-        { background: 'rgba(255, 0, 0, 0.5)', offset: 0, 'border-radius': '0px' },
-        { background: 'rgba(0, 255, 0, 0.5)', offset: 0.33, 'border-radius': '10px' },
-        { background: 'rgba(0, 0, 255, 0.5)', offset: 0.66, 'border-radius': '20px' },
-        { background: 'rgba(255, 0, 0, 0.5)', offset: 1, 'border-radius': '30px' }
+        { background: 'rgba(255, 0, 0, 0.5)', offset: 0, borderRadius: '0px' },
+        { background: 'rgba(0, 255, 0, 0.5)', offset: 0.33, borderRadius: '10px' },
+        { background: 'rgba(0, 0, 255, 0.5)', offset: 0.66, borderRadius: '20px' },
+        { background: 'rgba(255, 0, 0, 0.5)', offset: 1, borderRadius: '30px' }
       ])
       .onFinish(() => {
         const ev = new CustomEvent('ionAnimationFinished');