javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-20 04:14:21 +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;
elements: HTMLElement[];
childAnimations: Animation[];
id: string | undefined;
/**
* Play the animation

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

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

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

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