javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2026-03-13 10:22:08 +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

4
core/src/components/modal/animations/ios.enter.ts
View File

@@ -43,8 +43,8 @@ export const iosEnterAnimation = (
.beforeAddWrite(() => bodyEl.style.setProperty('background-color', 'black'))
.addElement(presentingEl)
.keyframes([
{ offset: 0, transform: 'translateY(0px) scale(1)', 'border-radius': '0px' },
{ offset: 1, transform: finalTransform, 'border-radius': '10px 10px 0 0' }
{ offset: 0, transform: 'translateY(0px) scale(1)', borderRadius: '0px' },
{ offset: 1, transform: finalTransform, borderRadius: '10px 10px 0 0' }
]);
baseAnimation.addAnimation(presentingAnimation);

4
core/src/components/modal/animations/ios.leave.ts
View File

@@ -44,8 +44,8 @@ export const iosLeaveAnimation = (
}
})
.keyframes([
{ offset: 0, transform: `translateY(${modalTransform}) scale(${currentPresentingScale})`, 'border-radius': '10px 10px 0 0' },
{ offset: 1, transform: 'translateY(0px) scale(1)', 'border-radius': '0px' }
{ offset: 0, transform: `translateY(${modalTransform}) scale(${currentPresentingScale})`, borderRadius: '10px 10px 0 0' },
{ offset: 1, transform: 'translateY(0px) scale(1)', borderRadius: '0px' }
]);
baseAnimation.addAnimation(presentingAnimation);

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;

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

@@ -494,9 +494,10 @@ export const createAnimation = (animationId?: string): Animation => {
const initializeCSSAnimation = (toggleAnimationName = true) => {
cleanUpStyleSheets();
const processedKeyframes = processKeyframes(_keyframes);
elements.forEach(element => {
if (_keyframes.length > 0) {
const keyframeRules = generateKeyframeRules(_keyframes);
if (processedKeyframes.length > 0) {
const keyframeRules = generateKeyframeRules(processedKeyframes);
keyframeName = (animationId !== undefined) ? animationId : generateKeyframeName(keyframeRules);
const stylesheet = createKeyframeStylesheet(keyframeName, keyframeRules, element);
stylesheets.push(stylesheet);
@@ -526,10 +527,8 @@ export const createAnimation = (animationId?: string): Animation => {
};
const initializeWebAnimation = () => {
const processedKeyframes = processKeyframes(_keyframes);
elements.forEach(element => {
const animation = element.animate(processedKeyframes, {
const animation = element.animate(_keyframes, {
id,
delay: getDelay(),
duration: getDuration(),

13
core/src/utils/animation/test/animation.spec.ts
View File

@@ -1,4 +1,5 @@
import { createAnimation } from '../animation';
import { processKeyframes } from '../animation-utils';
import { getTimeGivenProgression } from '../cubic-bezier';
import { Animation } from '../animation-interface';
@@ -82,6 +83,18 @@ describe('Animation Class', () => {
expect(animation.getKeyframes().length).toEqual(3);
});
it('should convert properties for CSS Animations', () => {
const processedKeyframes = processKeyframes([
{ borderRadius: '0px', easing: 'ease-in' , offset: 0 },
{ borderRadius: '4px', easing: 'ease-out', offset: 1 }
]);
expect(processedKeyframes).toEqual([
{ 'border-radius': '0px', 'animation-timing-function': 'ease-in', offset: 0 },
{ 'border-radius': '4px', 'animation-timing-function': 'ease-out', offset: 1 }
]);
});
it('should set the from keyframe properly', () => {
animation

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