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

feat(animation): add animation utility (#18918)

Browse Source 
* Add new keyframes proof of concept

* update esm import

* add base before and after methods, add tests

* add base before and after hooks

* update clean up methods, add tests

* add web animations support, change to arrow functions

* remove console logs

* add from, to, fromTo, and other properties

* add more tests, fix onFinish functionality, being testing with nav transitions

* add progress methods, use force linear

* run linter

* Add playSync

* integrate animations with framework components

* onFinish now supports multiple callbacks

* change const to let

* testing reverse

* add support for both animation utilities

* bug fix

* export createAnimation, a few tweaks

* add base tests

* fix issue with onFinish being called out of order. added tests

* fix race conditions in tests

* clean up

* fix bug where onFinish not calling for empty elements array,  update test

* clean up

* fix treeshaking, remove old comments

* remove old tests

* Add test for animationbuilder backwards compat

* update typings for menu controller

* mock web animations in tests

* run build

* fix type errors

* sync with master

* use requestAnimationFrame instead of writeTask

* fix flaky tests, fix menu

* fix ordering

* update webdriver

* fix wrong version

* Revert "fix wrong version"

This reverts commit be91296e9701399f8d784b08d09a3c475ca15df7.

Revert chromedriver update

* Revert "update webdriver"

This reverts commit e49bc9d76e335a0af5828725065399bd6795fa37.

Revert chromedriver update

* expose raw animation object, add tests

* add stylesheet recycling

* finalize before and after hook tests

* a few styling changes

* fix lint warnings

* get rid of old code

* Fix progressStep overflow bug

* disable reuse stylesheet

* small updates

* fix old animation create

* setStyleProperty helper

* reuse keyframe styles

* keyframes

* fix css animation issue with display: none, add tests

* add comment

* fix issue with progress animations and css animations

* clean up

* clean up pt2

* fix tests

* fix linter

* add fill for overlays

* fix swipe to go back

* clean up css animations when done

* fix edge cases with css animations

* fix menu open and close

* add reset function

* clean up reset fn

* Fix issue where animation always being reset

* allow updating animations on the fly

* add clear onfinish method

* fix linter

* add callback options, expand force direction

* ensure opts is defined

* fix css animations open and close for menus

* remove test

* add extra check

* clean up

* fix css anim bug swipe to go back

* fix pause

* setup alt animation to avoid flickering

* clean up

* reset flags on destroy

* add ability to change duration on progressEnd

* fix flicker on duration change for css animations

* fix ios transition

* remove unneeded recursion

* increase durability of updating css animations on the fly

* fix gesture anim

* fix web anim as well. more work for cleanup

* simplify progressEnd for css animations

* fix swipe to go back race condition

* clean up

* Add todo

* fix one more bug
This commit is contained in:
Liam DeBeasi
2019-08-12 10:05:04 -04:00
committed by GitHub
parent e33cf854a9
commit 30ca46ab12
70 changed files with 3974 additions and 762 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
core/src/components/loading/animations/ios.enter.ts
View File

@ -1,26 +1,28 @@
import { Animation } from '../../../interface';
import { IonicAnimation } from '../../../interface';
import { createAnimation } from '../../../utils/animation/animation';
/**
* iOS Loading Enter Animation
*/
export const iosEnterAnimation = (AnimationC: Animation, baseEl: HTMLElement): Promise<Animation> => {
const baseAnimation = new AnimationC();
export const iosEnterAnimation = (baseEl: HTMLElement): IonicAnimation => {
const baseAnimation = createAnimation();
const backdropAnimation = createAnimation();
const wrapperAnimation = createAnimation();
const backdropAnimation = new AnimationC();
backdropAnimation.addElement(baseEl.querySelector('ion-backdrop'));
backdropAnimation
.addElement(baseEl.querySelector('ion-backdrop'))
.fromTo('opacity', 0.01, 0.3);
const wrapperAnimation = new AnimationC();
wrapperAnimation.addElement(baseEl.querySelector('.loading-wrapper'));
wrapperAnimation
.addElement(baseEl.querySelector('.loading-wrapper'))
.keyframes([
{ offset: 0, opacity: 0.01, transform: 'scale(1.1)' },
{ offset: 1, opacity: 1, transform: 'scale(1)' }
]);
backdropAnimation.fromTo('opacity', 0.01, 0.3);
wrapperAnimation.fromTo('opacity', 0.01, 1)
.fromTo('scale', 1.1, 1);
return Promise.resolve(baseAnimation
return baseAnimation
.addElement(baseEl)
.easing('ease-in-out')
.duration(200)
.add(backdropAnimation)
.add(wrapperAnimation));
.addAnimation([backdropAnimation, wrapperAnimation]);
};

32
core/src/components/loading/animations/ios.leave.ts
View File

@ -1,26 +1,28 @@
import { Animation } from '../../../interface';
import { IonicAnimation } from '../../../interface';
import { createAnimation } from '../../../utils/animation/animation';
/**
* iOS Loading Leave Animation
*/
export const iosLeaveAnimation = (AnimationC: Animation, baseEl: HTMLElement): Promise<Animation> => {
const baseAnimation = new AnimationC();
export const iosLeaveAnimation = (baseEl: HTMLElement): IonicAnimation => {
const baseAnimation = createAnimation();
const backdropAnimation = createAnimation();
const wrapperAnimation = createAnimation();
const backdropAnimation = new AnimationC();
backdropAnimation.addElement(baseEl.querySelector('ion-backdrop'));
backdropAnimation
.addElement(baseEl.querySelector('ion-backdrop'))
.fromTo('opacity', 0.3, 0);
const wrapperAnimation = new AnimationC();
wrapperAnimation.addElement(baseEl.querySelector('.loading-wrapper'));
wrapperAnimation
.addElement(baseEl.querySelector('.loading-wrapper'))
.keyframes([
{ offset: 0, opacity: 0.99, transform: 'scale(1)' },
{ offset: 1, opacity: 0, transform: 'scale(0.9)' }
]);
backdropAnimation.fromTo('opacity', 0.3, 0);
wrapperAnimation.fromTo('opacity', 0.99, 0)
.fromTo('scale', 1, 0.9);
return Promise.resolve(baseAnimation
return baseAnimation
.addElement(baseEl)
.easing('ease-in-out')
.duration(200)
.add(backdropAnimation)
.add(wrapperAnimation));
.addAnimation([backdropAnimation, wrapperAnimation]);
};

31
core/src/components/loading/animations/md.enter.ts
View File

@ -1,25 +1,28 @@
import { Animation } from '../../../interface';
import { IonicAnimation } from '../../../interface';
import { createAnimation } from '../../../utils/animation/animation';
/**
* Md Loading Enter Animation
*/
export const mdEnterAnimation = (AnimationC: Animation, baseEl: HTMLElement): Promise<Animation> => {
const baseAnimation = new AnimationC();
export const mdEnterAnimation = (baseEl: HTMLElement): IonicAnimation => {
const baseAnimation = createAnimation();
const backdropAnimation = createAnimation();
const wrapperAnimation = createAnimation();
const backdropAnimation = new AnimationC();
backdropAnimation.addElement(baseEl.querySelector('ion-backdrop'));
backdropAnimation
.addElement(baseEl.querySelector('ion-backdrop'))
.fromTo('opacity', 0.01, 0.32);
const wrapperAnimation = new AnimationC();
wrapperAnimation.addElement(baseEl.querySelector('.loading-wrapper'));
wrapperAnimation
.addElement(baseEl.querySelector('.loading-wrapper'))
.keyframes([
{ offset: 0, opacity: 0.01, transform: 'scale(1.1)' },
{ offset: 1, opacity: 1, transform: 'scale(1)' }
]);
backdropAnimation.fromTo('opacity', 0.01, 0.32);
wrapperAnimation.fromTo('opacity', 0.01, 1).fromTo('scale', 1.1, 1);
return Promise.resolve(baseAnimation
return baseAnimation
.addElement(baseEl)
.easing('ease-in-out')
.duration(200)
.add(backdropAnimation)
.add(wrapperAnimation));
.addAnimation([backdropAnimation, wrapperAnimation]);
};

31
core/src/components/loading/animations/md.leave.ts
View File

@ -1,25 +1,28 @@
import { Animation } from '../../../interface';
import { IonicAnimation } from '../../../interface';
import { createAnimation } from '../../../utils/animation/animation';
/**
* Md Loading Leave Animation
*/
export const mdLeaveAnimation = (AnimationC: Animation, baseEl: HTMLElement): Promise<Animation> => {
const baseAnimation = new AnimationC();
export const mdLeaveAnimation = (baseEl: HTMLElement): IonicAnimation => {
const baseAnimation = createAnimation();
const backdropAnimation = createAnimation();
const wrapperAnimation = createAnimation();
const backdropAnimation = new AnimationC();
backdropAnimation.addElement(baseEl.querySelector('ion-backdrop'));
backdropAnimation
.addElement(baseEl.querySelector('ion-backdrop'))
.fromTo('opacity', 0.32, 0);
const wrapperAnimation = new AnimationC();
wrapperAnimation.addElement(baseEl.querySelector('.loading-wrapper'));
wrapperAnimation
.addElement(baseEl.querySelector('.loading-wrapper'))
.keyframes([
{ offset: 0, opacity: 0.99, transform: 'scale(1)' },
{ offset: 1, opacity: 0, transform: 'scale(0.9)' }
]);
backdropAnimation.fromTo('opacity', 0.32, 0);
wrapperAnimation.fromTo('opacity', 0.99, 0).fromTo('scale', 1, 0.9);
return Promise.resolve(baseAnimation
return baseAnimation
.addElement(baseEl)
.easing('ease-in-out')
.duration(200)
.add(backdropAnimation)
.add(wrapperAnimation));
.addAnimation([backdropAnimation, wrapperAnimation]);
};