fix(animations): convert hyphenated properties to camel case when using Web Animations (#20059)

fixes #20058

core/src/utils/animation/animation-utils.ts

@@ -1,3 +1,28 @@
+import { AnimationKeyFrames } from './animation-interface';
+
+/**
+ * Web Animations requires hyphenated CSS properties
+ * to be written in camelCase when animating
+ */
+export const processKeyframes = (keyframes: AnimationKeyFrames) => {
+  keyframes.forEach(keyframe => {
+    for (const key in keyframe) {
+      if (keyframe.hasOwnProperty(key) && key.includes('-')) {
+        const value = keyframe[key];
+        const newKey = convertHyphenToCamelCase(key);
+
+        keyframe[newKey] = value;
+        delete keyframe[key];
+      }
+    }
+  });
+
+  return keyframes;
+};
+
+const convertHyphenToCamelCase = (str: string) => {
+  return str.replace(/-([a-z])/ig, g => g[1].toUpperCase());
+};
 
 export const setStyleProperty = (element: HTMLElement, propertyName: string, value: string | null) => {
   element.style.setProperty(propertyName, value);

core/src/utils/animation/animation.ts

@@ -3,7 +3,7 @@
 import { raf } from '../helpers';
 
 import { Animation, AnimationCallbackOptions, AnimationDirection, AnimationFill, AnimationKeyFrame, AnimationKeyFrameEdge, AnimationKeyFrames, AnimationLifecycle, AnimationPlayOptions } from './animation-interface';
-import { addClassToArray, animationEnd, createKeyframeStylesheet, generateKeyframeName, generateKeyframeRules, removeStyleProperty, setStyleProperty } from './animation-utils';
+import { addClassToArray, animationEnd, createKeyframeStylesheet, generateKeyframeName, generateKeyframeRules, processKeyframes, removeStyleProperty, setStyleProperty } from './animation-utils';
 
 interface AnimationOnFinishCallback {
   c: AnimationLifecycle;
@@ -526,8 +526,10 @@ export const createAnimation = (animationId?: string): Animation => {
   };
 
   const initializeWebAnimation = () => {
+    const processedKeyframes = processKeyframes(_keyframes);
+
     elements.forEach(element => {
-      const animation = element.animate(_keyframes, {
+      const animation = element.animate(processedKeyframes, {
         id,
         delay: getDelay(),
         duration: getDuration(),

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 },
+        { background: 'rgba(255, 0, 0, 0.5)', offset: 0, 'border-radius': '0px' },
-        { background: 'rgba(0, 255, 0, 0.5)', offset: 0.33 },
+        { background: 'rgba(0, 255, 0, 0.5)', offset: 0.33, 'border-radius': '10px' },
-        { background: 'rgba(0, 0, 255, 0.5)', offset: 0.66 },
+        { background: 'rgba(0, 0, 255, 0.5)', offset: 0.66, 'border-radius': '20px' },
-        { background: 'rgba(255, 0, 0, 0.5)', offset: 1 }
+        { background: 'rgba(255, 0, 0, 0.5)', offset: 1, 'border-radius': '30px' }
       ])
       .onFinish(() => {
         const ev = new CustomEvent('ionAnimationFinished');

core/src/utils/animation/test/gesture/index.html

@@ -63,7 +63,7 @@
       }
     });
     
-    gesture.setDisabled(false);
+    gesture.enable(true);
     
     animationA
       .addElement(squareA)