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

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

Browse Source 
fixes #20058
This commit is contained in:
Liam DeBeasi
2019-12-10 15:28:44 -05:00
committed by GitHub
parent 6e0b9c4548
commit 56f67bd9a5
4 changed files with 34 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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);

6
core/src/utils/animation/animation.ts
View File

@ -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(),

8
core/src/utils/animation/test/basic/index.html
View File

@ -29,10 +29,10 @@
.iterations(2)
.easing('linear')
.keyframes([
{ background: 'rgba(255, 0, 0, 0.5)', offset: 0 },
{ background: 'rgba(0, 255, 0, 0.5)', offset: 0.33 },
{ background: 'rgba(0, 0, 255, 0.5)', offset: 0.66 },
{ background: 'rgba(255, 0, 0, 0.5)', offset: 1 }
{ 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' }
])
.onFinish(() => {
const ev = new CustomEvent('ionAnimationFinished');

2
core/src/utils/animation/test/gesture/index.html
View File

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