javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-17 02:31:34 +08:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
fixes #20251
This commit is contained in:
Liam DeBeasi
2020-01-21 12:28:41 -05:00
committed by GitHub
parent 34bfc62820
commit 32a7401576
6 changed files with 40 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
core/src/utils/animation/animation-utils.ts
View File

@ -7,12 +7,21 @@ 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];
}
}
}
}
});
@ -20,8 +29,8 @@ export const processKeyframes = (keyframes: AnimationKeyFrames) => {
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;