Skip to content

Commit

Permalink
feat: remove css animations support for ionic animations (#29123)
Browse files Browse the repository at this point in the history 
Issue number: Internal

---------

<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->

<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->

## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->

Ionic Framework provides a small utility wrapper around the Web
Animations API. Historically not all browsers that Ionic Framework
supported, had support for the Web Animations API. To offer backwards
compatibility, Ionic Framework provided fallback behaviors for the
different wrapped APIs.


## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->

- Removes the legacy CSS animations fallback behavior from the Web
Animations API animation utility. Maintaining a few no-op behaviors for
test environments.
- Resolved a few internal type usages that were casting to any
- Removed spec tests that were testing the fallback CSS animations
behavior and/or already had test coverage from other unit tests.

## Does this introduce a breaking change?

- [x] Yes
- [ ] No

<!--
  If this introduces a breaking change:
1. Describe the impact and migration path for existing applications
below.
  2. Update the BREAKING.md file with the breaking change.
3. Add "BREAKING CHANGE: [...]" to the commit description when merging.
See
https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#footer
for more information.
-->

All modern browsers support the Web Animations API today. If a developer
needs to target an older browser that does not support Web Animations,
they should either use [a
polyfill](https://github.com/web-animations/web-animations-js), or
implement the fallback behavior themselves.

## Other information

<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->

---------

Co-authored-by: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
  • Loading branch information
@sean-perkins @liamdebeasi
sean-perkins and liamdebeasi committed Mar 20, 2024
1 parent bb1402e commit 892594d
Show file tree
Hide file tree
Showing 15 changed files with 13 additions and 468 deletions.
3 changes: 3 additions & 0 deletions BREAKING.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -60,8 +60,11 @@ This section details the desktop browser, JavaScript framework, and mobile platf
| iOS | 15+ |
| Android | 5.1+ with Chromium 89+ |

Ionic Framework v8 removes backwards support for CSS Animations in favor of the [Web Animations API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API). All minimum browser versions listed above support the Web Animations API.

<h2 id="version-8x-dark-mode">Dark Mode</h2>


In previous versions, it was recommended to define the dark palette in the following way:

```css
Expand Down
129 changes: 0 additions & 129 deletions core/src/utils/animation/animation-utils.ts
View file
Original file line number Diff line number Diff line change
@@ -1,41 +1,5 @@
import type { AnimationKeyFrames } from './animation-interface';

let animationPrefix: string | undefined;

/**
* 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) {
// eslint-disable-next-line no-prototype-builtins
if (keyframe.hasOwnProperty(key)) {
const value = 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 convertCamelCaseToHypen = (str: string) => {
return str.replace(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase();
};

export const getAnimationPrefix = (el: HTMLElement): string => {
if (animationPrefix === undefined) {
const supportsUnprefixed = el.style.animationName !== undefined;
Expand All @@ -50,99 +14,6 @@ export const setStyleProperty = (element: HTMLElement, propertyName: string, val
element.style.setProperty(prefix + propertyName, value);
};

export const removeStyleProperty = (element: HTMLElement, propertyName: string) => {
const prefix = propertyName.startsWith('animation') ? getAnimationPrefix(element) : '';
element.style.removeProperty(prefix + propertyName);
};

export const animationEnd = (el: HTMLElement | null, callback: (ev?: TransitionEvent) => void) => {
let unRegTrans: (() => void) | undefined;
const opts: AddEventListenerOptions = { passive: true };

const unregister = () => {
if (unRegTrans) {
unRegTrans();
}
};

const onTransitionEnd = (ev: Event) => {
if (el === ev.target) {
unregister();
callback(ev as TransitionEvent);
}
};

if (el) {
el.addEventListener('webkitAnimationEnd', onTransitionEnd, opts);
el.addEventListener('animationend', onTransitionEnd, opts);

unRegTrans = () => {
el.removeEventListener('webkitAnimationEnd', onTransitionEnd, opts);
el.removeEventListener('animationend', onTransitionEnd, opts);
};
}

return unregister;
};

// TODO(FW-2832): type
export const generateKeyframeRules = (keyframes: any[] = []) => {
return keyframes
.map((keyframe) => {
const offset = keyframe.offset;

const frameString = [];
for (const property in keyframe) {
// eslint-disable-next-line no-prototype-builtins
if (keyframe.hasOwnProperty(property) && property !== 'offset') {
frameString.push(`${property}: ${keyframe[property]};`);
}
}

return `${offset * 100}% { ${frameString.join(' ')} }`;
})
.join(' ');
};

const keyframeIds: string[] = [];

export const generateKeyframeName = (keyframeRules: string) => {
let index = keyframeIds.indexOf(keyframeRules);
if (index < 0) {
index = keyframeIds.push(keyframeRules) - 1;
}
return `ion-animation-${index}`;
};

export const getStyleContainer = (element: HTMLElement) => {
// getRootNode is not always available in SSR environments.
// TODO(FW-2832): types
const rootNode = element.getRootNode !== undefined ? (element.getRootNode() as any) : element;
return rootNode.head || rootNode;
};

export const createKeyframeStylesheet = (
keyframeName: string,
keyframeRules: string,
element: HTMLElement
): HTMLElement => {
const styleContainer = getStyleContainer(element);
const keyframePrefix = getAnimationPrefix(element);

const existingStylesheet = styleContainer.querySelector('#' + keyframeName);
if (existingStylesheet) {
return existingStylesheet;
}

const stylesheet = (element.ownerDocument ?? document).createElement('style');
stylesheet.id = keyframeName;
stylesheet.textContent = `@${keyframePrefix}keyframes ${keyframeName} { ${keyframeRules} } @${keyframePrefix}keyframes ${keyframeName}-alt { ${keyframeRules} }`;

styleContainer.appendChild(stylesheet);

return stylesheet;
};

export const addClassToArray = (classes: string[] = [], className: string | string[] | undefined): string[] => {
if (className !== undefined) {
const classNameToAppend = Array.isArray(className) ? className : [className];
Expand Down
Loading

0 comments on commit 892594d

Please sign in to comment.