chore: address pr feedback

We are blocked by a webkit regression. This commit addresses all other feedback in the PR.

core/api.txt

@@ -702,7 +702,7 @@ ion-item-options,prop,side,"end" | "start",'end',false,false
 ion-item-options,event,ionSwipe,any,true
 
 ion-item-sliding,none
-ion-item-sliding,prop,animationType,"legacy" | "modern",'legacy',false,false
+ion-item-sliding,prop,animationType,"legacy" | "modern",SlidingAnimation.Legacy,false,false
 ion-item-sliding,prop,disabled,boolean,false,false,false
 ion-item-sliding,method,close,close() => Promise<void>
 ion-item-sliding,method,closeOpened,closeOpened() => Promise<boolean>

core/src/components.d.ts

@@ -20,6 +20,7 @@ import { SpinnerTypes } from "./components/spinner/spinner-configs";
 import { InputChangeEventDetail, InputInputEventDetail } from "./components/input/input-interface";
 import { CounterFormatter } from "./components/item/item-interface";
 import { MenuChangeEventDetail, Side } from "./components/menu/menu-interface";
+import { SlidingAnimationType } from "./components/item-sliding/item-sliding-interface";
 import { ModalBreakpointChangeEventDetail, ModalHandleBehavior } from "./components/modal/modal-interface";
 import { NavComponent, NavComponentWithProps, NavOptions, RouterOutletOptions, SwipeGestureHandler, TransitionDoneFn, TransitionInstruction } from "./components/nav/nav-interface";
 import { ViewController } from "./components/nav/view-controller";
@@ -56,6 +57,7 @@ export { SpinnerTypes } from "./components/spinner/spinner-configs";
 export { InputChangeEventDetail, InputInputEventDetail } from "./components/input/input-interface";
 export { CounterFormatter } from "./components/item/item-interface";
 export { MenuChangeEventDetail, Side } from "./components/menu/menu-interface";
+export { SlidingAnimationType } from "./components/item-sliding/item-sliding-interface";
 export { ModalBreakpointChangeEventDetail, ModalHandleBehavior } from "./components/modal/modal-interface";
 export { NavComponent, NavComponentWithProps, NavOptions, RouterOutletOptions, SwipeGestureHandler, TransitionDoneFn, TransitionInstruction } from "./components/nav/nav-interface";
 export { ViewController } from "./components/nav/view-controller";
@@ -1439,9 +1441,9 @@ export namespace Components {
     }
     interface IonItemSliding {
         /**
-          * Specifies the animation behavior for sliding item options. You can choose between two available options: "modern" and "legacy".  - "legacy": The item will be swiped to reveal the option buttons beneath it. - "modern": As the item is swiped, all item options will smoothly and gradually reveal themselves.  The "modern" animation type requires the [Web Animations API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API). Check [Browser Support](https://caniuse.com/web-animation) for more information.
+          * Specifies the animation behavior for sliding item options. You can choose between two available options: "modern" and "legacy".  - "legacy": The item will be swiped to reveal the option buttons beneath it. - "modern": As the item is swiped, all item options will smoothly and gradually reveal themselves.
          */
-        "animationType": 'modern' | 'legacy';
+        "animationType": SlidingAnimationType;
         /**
           * Close the sliding item. Items can also be closed from the [List](./list).
          */
@@ -6194,9 +6196,9 @@ declare namespace LocalJSX {
     }
     interface IonItemSliding {
         /**
-          * Specifies the animation behavior for sliding item options. You can choose between two available options: "modern" and "legacy".  - "legacy": The item will be swiped to reveal the option buttons beneath it. - "modern": As the item is swiped, all item options will smoothly and gradually reveal themselves.  The "modern" animation type requires the [Web Animations API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API). Check [Browser Support](https://caniuse.com/web-animation) for more information.
+          * Specifies the animation behavior for sliding item options. You can choose between two available options: "modern" and "legacy".  - "legacy": The item will be swiped to reveal the option buttons beneath it. - "modern": As the item is swiped, all item options will smoothly and gradually reveal themselves.
          */
-        "animationType"?: 'modern' | 'legacy';
+        "animationType"?: SlidingAnimationType;
         /**
           * If `true`, the user cannot interact with the sliding item.
          */

core/src/components/item-sliding/animations/item-sliding-options.ts

@@ -4,7 +4,7 @@ import { createAnimation } from '@utils/animation/animation';
  * Animates the opening and closing of a sliding item option.
  * @param el The element to animate.
  * @param viewportOffset The offset of the element on the x-axis to locate it off-screen.
- * @param progress The progress of the animation (0 - 1).
+ * @param progress The progress of the animation. Accepted values are between 0 and 1. Represents the progress from the starting transform to the final transform.
  * @param isFinal Whether the animation is in its final state (collapsed or expanded).
  * @param isReset Whether to reset the element to its initial state.
  * @param zIndex _Optional_ The z-index to apply to the element.

core/src/components/item-sliding/item-sliding-interface.ts

@@ -1,3 +1,5 @@
 export interface ItemSlidingCustomEvent extends CustomEvent {
   target: HTMLIonItemSlidingElement;
 }
+
+export type SlidingAnimationType = 'modern' | 'legacy';

core/src/components/item-sliding/item-sliding.tsx

@@ -1,9 +1,7 @@
 import type { ComponentInterface, EventEmitter } from '@stencil/core';
 import { Component, Element, Event, Host, Method, Prop, State, Watch, h } from '@stencil/core';
-import { supportsWebAnimations } from '@utils/animation/animation';
 import { findClosestIonContent, disableContentScrollY, resetContentScrollY } from '@utils/content';
 import { isEndSide } from '@utils/helpers';
-import { printIonWarning } from '@utils/logging';
 import { isRTL } from '@utils/rtl';
 import { watchForOptions } from '@utils/watch-options';
 
@@ -12,6 +10,7 @@ import { type Gesture, type GestureDetail } from '../../interface';
 import type { Side } from '../menu/menu-interface';
 
 import { slidingItemAnimation } from './animations/item-sliding-options';
+import type { SlidingAnimationType } from './item-sliding-interface';
 
 const SWIPE_MARGIN = 30;
 const ELASTIC_FACTOR = 0.55;
@@ -33,6 +32,11 @@ const enum SlidingState {
   SwipeStart = 1 << 6,
 }
 
+const SlidingAnimation: { [key in string]: SlidingAnimationType } = {
+  Modern: 'modern',
+  Legacy: 'legacy',
+};
+
 let openSlidingItem: HTMLIonItemSlidingElement | undefined;
 
 @Component({
@@ -77,10 +81,8 @@ export class ItemSliding implements ComponentInterface {
    * - "legacy": The item will be swiped to reveal the option buttons beneath it.
    * - "modern": As the item is swiped, all item options will smoothly and gradually reveal themselves.
    *
-   * The "modern" animation type requires the [Web Animations API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API).
-   * Check [Browser Support](https://caniuse.com/web-animation) for more information.
    */
-  @Prop() animationType: 'modern' | 'legacy' = 'legacy';
+  @Prop() animationType: SlidingAnimationType = SlidingAnimation.Legacy;
 
   /**
    * Emitted when the sliding position changes.
@@ -138,13 +140,6 @@ export class ItemSliding implements ComponentInterface {
     }
   }
 
-  componentWillLoad() {
-    if (!supportsWebAnimations && this.animationType === 'modern') {
-      printIonWarning('Animation type "modern" needs Web Animations API support. Falling back to "legacy".');
-      this.animationType = 'legacy';
-    }
-  }
-
   /**
    * Get the amount the item is open in pixels.
    */
@@ -504,14 +499,14 @@ export class ItemSliding implements ComponentInterface {
       openSlidingItem = undefined;
       style.transform = '';
 
-      if (animationType === 'modern') {
+      if (animationType === SlidingAnimation.Modern) {
         this.animateSlidingItemOptions(0, rtl);
       }
       return;
     }
     style.transform = `translate3d(${-openAmount}px,0,0)`;
 
-    if (animationType === 'modern') {
+    if (animationType === SlidingAnimation.Modern) {
       this.animateSlidingItemOptions(openAmount, rtl);
     }
 

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

@@ -242,9 +242,10 @@ export interface Animation {
   /**
    * Writes the computed values of the animation's current styles
    * into its target element's style attribute.
+   *
    * @internal
    */
-  commitStyles(shouldCommitStyles?: boolean): Animation;
+  commitStyles(): Animation;
 }
 
 export type AnimationLifecycle = (currentStep: 0 | 1, animation: Animation) => void;

core/src/utils/animation/animation.ts

@@ -38,15 +38,6 @@ type AnimationOnStopCallback = AnimationOnFinishCallback;
  */
 type AnimationReadWriteCallback = () => void;
 
-export const supportsAnimationEffect =
-  typeof (AnimationEffect as any) === 'function' ||
-  (win !== undefined && typeof (win as any).AnimationEffect === 'function');
-
-export const supportsWebAnimations =
-  typeof (Element as any) === 'function' &&
-  typeof (Element as any).prototype!.animate === 'function' &&
-  supportsAnimationEffect;
-
 export const createAnimation = (animationId?: string): Animation => {
   let _delay: number | undefined;
   let _duration: number | undefined;
@@ -445,8 +436,8 @@ export const createAnimation = (animationId?: string): Animation => {
     return ani;
   };
 
-  const commitStyles = (shouldCommitStyles: boolean = true) => {
-    _commitStyles = shouldCommitStyles;
+  const commitStyles = () => {
+    _commitStyles = true;
 
     update(true);
 
@@ -706,6 +697,10 @@ export const createAnimation = (animationId?: string): Animation => {
         direction: getDirection(),
       });
 
+      if (_commitStyles) {
+        animation.commitStyles();
+      }
+
       animation.pause();
 
       webAnimations.push(animation);
@@ -766,6 +761,10 @@ export const createAnimation = (animationId?: string): Animation => {
         fill: getFill(),
         direction: getDirection(),
       });
+
+      if (_commitStyles) {
+        animation.commitStyles();
+      }
     });
 
     if (step !== undefined) {