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

feat(animation): Animation Identifiers (#19771)

Browse Source 
resolves #19550
This commit is contained in:
Liam DeBeasi
2019-10-29 15:44:41 -04:00
committed by GitHub
parent b642b532e8
commit 7d417154c5
3 changed files with 8 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
core/src/utils/animation/animation-interface.ts
View File

@ -2,6 +2,7 @@ export interface Animation {
parentAnimation: Animation | undefined; parentAnimation: Animation | undefined;
elements: HTMLElement[]; elements: HTMLElement[];
childAnimations: Animation[]; childAnimations: Animation[];
id: string | undefined;
/** /**
* Play the animation * Play the animation

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

@ -24,7 +24,7 @@ interface AnimationInternal extends Animation {
animationFinish(): void; animationFinish(): void;
} }
export const createAnimation = (): Animation => { export const createAnimation = (animationId?: string): Animation => {
let _delay: number | undefined; let _delay: number | undefined;
let _duration: number | undefined; let _duration: number | undefined;
let _easing: string | undefined; let _easing: string | undefined;
@ -32,6 +32,8 @@ export const createAnimation = (): Animation => {
let _fill: AnimationFill | undefined; let _fill: AnimationFill | undefined;
let _direction: AnimationDirection | undefined; let _direction: AnimationDirection | undefined;
let _keyframes: AnimationKeyFrames = []; let _keyframes: AnimationKeyFrames = [];
const id: string | undefined = animationId;
let beforeAddClasses: string[] = []; let beforeAddClasses: string[] = [];
let beforeRemoveClasses: string[] = []; let beforeRemoveClasses: string[] = [];
let initialized = false; let initialized = false;
@ -533,7 +535,7 @@ export const createAnimation = (): Animation => {
elements.forEach(element => { elements.forEach(element => {
if (_keyframes.length > 0) { if (_keyframes.length > 0) {
const keyframeRules = generateKeyframeRules(_keyframes); const keyframeRules = generateKeyframeRules(_keyframes);
keyframeName = generateKeyframeName(keyframeRules); keyframeName = (animationId !== undefined) ? animationId : generateKeyframeName(keyframeRules);
const stylesheet = createKeyframeStylesheet(keyframeName, keyframeRules, element); const stylesheet = createKeyframeStylesheet(keyframeName, keyframeRules, element);
stylesheets.push(stylesheet); stylesheets.push(stylesheet);
@ -564,6 +566,7 @@ export const createAnimation = (): Animation => {
const initializeWebAnimation = () => { const initializeWebAnimation = () => {
elements.forEach(element => { elements.forEach(element => {
const animation = element.animate(_keyframes, { const animation = element.animate(_keyframes, {
id,
delay: getDelay(), delay: getDelay(),
duration: getDuration(), duration: getDuration(),
easing: getEasing(), easing: getEasing(),
@ -957,6 +960,7 @@ export const createAnimation = (): Animation => {
parentAnimation, parentAnimation,
elements, elements,
childAnimations, childAnimations,
id,
animationFinish, animationFinish,
from, from,
to, to,

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

@ -21,7 +21,7 @@
const squareA = document.querySelector('.square-a'); const squareA = document.querySelector('.square-a');
const rootAnimation = createAnimation(); const rootAnimation = createAnimation('root-animation-id');
rootAnimation rootAnimation
.addElement(squareA) .addElement(squareA)