Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(animation): Ionic Animation utility #18918

Merged
merged 100 commits into from Aug 12, 2019
Merged
Changes from 20 commits
Commits
Show all changes
100 commits
Select commit Hold shift + click to select a range
bd734c0
Add new keyframes proof of concept
liamdebeasi Jul 10, 2019
fb4d0fc
update esm import
liamdebeasi Jul 10, 2019
9ff5dd3
add base before and after methods, add tests
liamdebeasi Jul 11, 2019
f4f4d9f
add base before and after hooks
liamdebeasi Jul 12, 2019
b3942ed
update clean up methods, add tests
liamdebeasi Jul 12, 2019
05f5cc8
add web animations support, change to arrow functions
liamdebeasi Jul 15, 2019
781db86
remove console logs
liamdebeasi Jul 15, 2019
93e9d9a
Merge branch 'feat-animation' of https://github.com/ionic-team/ionic …
liamdebeasi Jul 16, 2019
ec32f56
add from, to, fromTo, and other properties
liamdebeasi Jul 17, 2019
a78ba2d
add more tests, fix onFinish functionality, being testing with nav tr…
liamdebeasi Jul 17, 2019
7c4dc95
add progress methods, use force linear
liamdebeasi Jul 18, 2019
d1db4b9
run linter
liamdebeasi Jul 18, 2019
cda669f
sync with master
liamdebeasi Jul 22, 2019
b6392af
Add playSync
liamdebeasi Jul 23, 2019
fbf9661
integrate animations with framework components
liamdebeasi Jul 23, 2019
d1752ce
onFinish now supports multiple callbacks
liamdebeasi Jul 24, 2019
13c80f3
change const to let
liamdebeasi Jul 24, 2019
9664fe5
testing reverse
liamdebeasi Jul 25, 2019
3f21c5e
add support for both animation utilities
liamdebeasi Jul 25, 2019
4a12584
bug fix
liamdebeasi Jul 26, 2019
d8df74e
export createAnimation, a few tweaks
liamdebeasi Jul 26, 2019
085f5df
add base tests
liamdebeasi Jul 26, 2019
b3f6219
fix issue with onFinish being called out of order. added tests
liamdebeasi Jul 29, 2019
fc9a322
fix race conditions in tests
liamdebeasi Jul 29, 2019
987f1eb
clean up
liamdebeasi Jul 29, 2019
de45043
fix bug where onFinish not calling for empty elements array, update …
liamdebeasi Jul 29, 2019
5a71831
clean up
liamdebeasi Jul 29, 2019
245c9b7
fix treeshaking, remove old comments
liamdebeasi Jul 30, 2019
cdca9e1
remove old tests
liamdebeasi Jul 30, 2019
c1b4347
Add test for animationbuilder backwards compat
liamdebeasi Jul 30, 2019
b46717a
update typings for menu controller
liamdebeasi Jul 30, 2019
c3551d2
mock web animations in tests
liamdebeasi Jul 30, 2019
ff05044
run build
liamdebeasi Jul 30, 2019
a21f43e
fix type errors
liamdebeasi Jul 30, 2019
a7d66fb
Merge remote-tracking branch 'origin' into feat-animation
liamdebeasi Jul 30, 2019
07e8590
sync with master
liamdebeasi Jul 30, 2019
07c50c1
use requestAnimationFrame instead of writeTask
adamdbradley Jul 30, 2019
cf585f1
fix flaky tests, fix menu
liamdebeasi Jul 31, 2019
3a9b7be
fix ordering
liamdebeasi Jul 31, 2019
e49bc9d
update webdriver
liamdebeasi Jul 31, 2019
be91296
fix wrong version
liamdebeasi Jul 31, 2019
2b09ee4
Revert "fix wrong version"
liamdebeasi Jul 31, 2019
4344cb6
Revert "update webdriver"
liamdebeasi Jul 31, 2019
3daa1f4
expose raw animation object, add tests
liamdebeasi Aug 1, 2019
326804f
add stylesheet recycling
liamdebeasi Aug 1, 2019
da81295
finalize before and after hook tests
liamdebeasi Aug 1, 2019
4398545
a few styling changes
liamdebeasi Aug 1, 2019
41cb970
fix lint warnings
liamdebeasi Aug 1, 2019
a7ea406
get rid of old code
liamdebeasi Aug 1, 2019
80b6d20
Fix progressStep overflow bug
liamdebeasi Aug 1, 2019
b5f2934
disable reuse stylesheet
liamdebeasi Aug 1, 2019
2c01701
small updates
adamdbradley Aug 2, 2019
40882d3
fix old animation create
adamdbradley Aug 2, 2019
896bbcf
setStyleProperty helper
adamdbradley Aug 2, 2019
6db303f
reuse keyframe styles
adamdbradley Aug 2, 2019
39d0349
keyframes
adamdbradley Aug 5, 2019
ef9917a
fix css animation issue with display: none, add tests
liamdebeasi Aug 5, 2019
30c3bac
add comment
liamdebeasi Aug 5, 2019
dc41c58
fix issue with progress animations and css animations
liamdebeasi Aug 6, 2019
2fd8c50
Merge remote-tracking branch 'origin' into feat-animation
liamdebeasi Aug 6, 2019
dda1358
clean up
liamdebeasi Aug 6, 2019
67917eb
clean up pt2
liamdebeasi Aug 6, 2019
368fcba
fix tests
liamdebeasi Aug 6, 2019
73d4afd
fix linter
liamdebeasi Aug 6, 2019
eebd6ec
Merge branch 'master' into feat-animation
liamdebeasi Aug 6, 2019
a67c99a
add fill for overlays
liamdebeasi Aug 6, 2019
bc8ea5d
fix swipe to go back
liamdebeasi Aug 6, 2019
f9d0129
clean up css animations when done
liamdebeasi Aug 6, 2019
2c5a82f
fix edge cases with css animations
liamdebeasi Aug 6, 2019
cb3ef33
Merge remote-tracking branch 'origin' into feat-animation
liamdebeasi Aug 7, 2019
a5707e9
fix menu open and close
liamdebeasi Aug 7, 2019
4abcb6f
add reset function
liamdebeasi Aug 7, 2019
44f1b49
clean up reset fn
liamdebeasi Aug 7, 2019
668d002
Fix issue where animation always being reset
liamdebeasi Aug 7, 2019
b0d281f
allow updating animations on the fly
liamdebeasi Aug 7, 2019
bedc341
add clear onfinish method
liamdebeasi Aug 7, 2019
44694fd
fix linter
liamdebeasi Aug 7, 2019
2d42f80
add callback options, expand force direction
liamdebeasi Aug 8, 2019
7fb5dac
ensure opts is defined
liamdebeasi Aug 8, 2019
f95c476
fix css animations open and close for menus
liamdebeasi Aug 8, 2019
d5ff2e0
remove test
liamdebeasi Aug 8, 2019
260325c
add extra check
liamdebeasi Aug 8, 2019
7bf9e04
clean up
liamdebeasi Aug 8, 2019
1aaeaaf
fix css anim bug swipe to go back
liamdebeasi Aug 8, 2019
7d40eb0
fix pause
liamdebeasi Aug 8, 2019
deb6599
setup alt animation to avoid flickering
liamdebeasi Aug 8, 2019
b0c471d
clean up
liamdebeasi Aug 8, 2019
5d8de9d
reset flags on destroy
liamdebeasi Aug 9, 2019
0c789bb
add ability to change duration on progressEnd
liamdebeasi Aug 9, 2019
14229ba
fix flicker on duration change for css animations
liamdebeasi Aug 9, 2019
f874ad5
fix ios transition
liamdebeasi Aug 9, 2019
8c85362
remove unneeded recursion
liamdebeasi Aug 9, 2019
89a6dee
increase durability of updating css animations on the fly
liamdebeasi Aug 10, 2019
11545fb
fix gesture anim
liamdebeasi Aug 12, 2019
c5b9039
fix web anim as well. more work for cleanup
liamdebeasi Aug 12, 2019
b954b46
simplify progressEnd for css animations
liamdebeasi Aug 12, 2019
813b1f4
fix swipe to go back race condition
liamdebeasi Aug 12, 2019
60e3aa1
clean up
liamdebeasi Aug 12, 2019
db45b0f
Add todo
liamdebeasi Aug 12, 2019
bf34877
fix one more bug
liamdebeasi Aug 12, 2019
File filter...
Filter file types
Jump to…
Jump to file or symbol
Failed to load files and symbols.

Always

Just for now

@@ -1387,7 +1387,7 @@ export namespace Components {
/**
* Registers a new animation that can be used with any `ion-menu` by passing the name of the animation in its `type` property.
*/
'registerAnimation': (name: string, animation: AnimationBuilder) => Promise<void>;
'registerAnimation': (name: string, animation: any) => Promise<void>;
/**
* Enable or disable the ability to swipe open the menu.
*/
@@ -1,7 +1,7 @@
import { Component, ComponentInterface, Element, Event, EventEmitter, Listen, Method, Prop, h } from '@stencil/core';

import { getIonMode } from '../../global/ionic-global';
import { ActionSheetButton, Animation, AnimationBuilder, CssClassMap, OverlayEventDetail, OverlayInterface } from '../../interface';
import { ActionSheetButton, AnimationBuilder, CssClassMap, OverlayEventDetail, OverlayInterface } from '../../interface';
import { BACKDROP, dismiss, eventMethod, isCancel, present, safeCall } from '../../utils/overlays';
import { getClassMap } from '../../utils/theme';

@@ -24,7 +24,7 @@ import { mdLeaveAnimation } from './animations/md.leave';
export class ActionSheet implements ComponentInterface, OverlayInterface {

presented = false;
animation?: Animation;
animation?: any;
mode = getIonMode(this);

@Element() el!: HTMLElement;
@@ -1,27 +1,25 @@
import { Animation } from '../../../interface';
import { IonicAnimation } from '../../../interface';
import { createAnimation } from '../../../utils/animation/animation';

/**
* iOS Action Sheet 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.4);

const wrapperAnimation = new AnimationC();
wrapperAnimation.addElement(baseEl.querySelector('.action-sheet-wrapper'));
wrapperAnimation
.addElement(baseEl.querySelector('.action-sheet-wrapper'))
.fromTo('transform', 'translateY(100%)', 'translateY(0%)');

backdropAnimation.fromTo('opacity', 0.01, 0.4);

wrapperAnimation.fromTo('translateY', '100%', '0%');

const ani = baseAnimation
return baseAnimation
.addElement(baseEl)
.easing('cubic-bezier(.36,.66,.04,1)')
.duration(400)
.add(backdropAnimation)
.add(wrapperAnimation);

return Promise.resolve(ani);
.addAnimation([backdropAnimation, wrapperAnimation]);
};
@@ -1,27 +1,25 @@
import { Animation } from '../../../interface';
import { IonicAnimation } from '../../../interface';
import { createAnimation } from '../../../utils/animation/animation';

/**
* iOS Action Sheet 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.4, 0);

const wrapperAnimation = new AnimationC();
wrapperAnimation.addElement(baseEl.querySelector('.action-sheet-wrapper'));
wrapperAnimation
.addElement(baseEl.querySelector('.action-sheet-wrapper'))
.fromTo('transform', 'translateY(0%)', 'translateY(100%)');

backdropAnimation.fromTo('opacity', 0.4, 0);

wrapperAnimation.fromTo('translateY', '0%', '100%');

const ani = baseAnimation
return baseAnimation
.addElement(baseEl)
.easing('cubic-bezier(.36,.66,.04,1)')
.duration(450)
.add(backdropAnimation)
.add(wrapperAnimation);

return Promise.resolve(ani);
.addAnimation([backdropAnimation, wrapperAnimation]);
};
@@ -1,27 +1,25 @@

import { Animation } from '../../../interface';
import { IonicAnimation } from '../../../interface';
import { createAnimation } from '../../../utils/animation/animation';

/**
* MD Action Sheet Enter Animation
*/
export const mdEnterAnimation = (AnimationC: Animation, baseEl: HTMLElement): Promise<Animation> => {
const baseAnimation = new AnimationC();

const backdropAnimation = new AnimationC();
backdropAnimation.addElement(baseEl.querySelector('ion-backdrop'));
export const mdEnterAnimation = (baseEl: HTMLElement): IonicAnimation => {
const baseAnimation = createAnimation();
const backdropAnimation = createAnimation();
const wrapperAnimation = createAnimation();

const wrapperAnimation = new AnimationC();
wrapperAnimation.addElement(baseEl.querySelector('.action-sheet-wrapper'));
backdropAnimation
.addElement(baseEl.querySelector('ion-backdrop'))
.fromTo('opacity', 0.01, 0.32);

backdropAnimation.fromTo('opacity', 0.01, 0.32);
wrapperAnimation.fromTo('translateY', '100%', '0%');
wrapperAnimation
.addElement(baseEl.querySelector('.action-sheet-wrapper'))
.fromTo('transform', 'translateY(100%)', 'translateY(0%)');

const ani = baseAnimation
return baseAnimation
.addElement(baseEl)
.easing('cubic-bezier(.36,.66,.04,1)')
.duration(400)
.add(backdropAnimation)
.add(wrapperAnimation);

return Promise.resolve(ani);
.addAnimation([backdropAnimation, wrapperAnimation]);
};
@@ -1,27 +1,25 @@
import { Animation } from '../../../interface';
import { IonicAnimation } from '../../../interface';
import { createAnimation } from '../../../utils/animation/animation';

/**
* MD Action Sheet Leave Animation
*/
export const mdLeaveAnimation = (AnimationC: Animation, baseEl: HTMLElement): Promise<Animation> => {
export const mdLeaveAnimation = (baseEl: HTMLElement): IonicAnimation => {
const baseAnimation = createAnimation();
const backdropAnimation = createAnimation();
const wrapperAnimation = createAnimation();

const baseAnimation = new AnimationC();
backdropAnimation
.addElement(baseEl.querySelector('ion-backdrop'))
.fromTo('opacity', 0.32, 0);

const backdropAnimation = new AnimationC();
backdropAnimation.addElement(baseEl.querySelector('ion-backdrop'));
wrapperAnimation
.addElement(baseEl.querySelector('.action-sheet-wrapper'))
.fromTo('transform', 'translateY(0%)', 'translateY(100%)');

const wrapperAnimation = new AnimationC();
wrapperAnimation.addElement(baseEl.querySelector('.action-sheet-wrapper'));

backdropAnimation.fromTo('opacity', 0.32, 0);
wrapperAnimation.fromTo('translateY', '0%', '100%');

const ani = baseAnimation
return baseAnimation
.addElement(baseEl)
.easing('cubic-bezier(.36,.66,.04,1)')
.duration(450)
.add(backdropAnimation)
.add(wrapperAnimation);

return Promise.resolve(ani);
.addAnimation([backdropAnimation, wrapperAnimation]);
};
@@ -1,27 +1,28 @@
import { Animation } from '../../../interface';
import { IonicAnimation } from '../../../interface';
import { createAnimation } from '../../../utils/animation/animation';

/**
* iOS Alert 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('.alert-wrapper'));
wrapperAnimation
.addElement(baseEl.querySelector('.alert-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);

const ani = baseAnimation
return baseAnimation
.addElement(baseEl)
.easing('ease-in-out')
.duration(200)
.add(backdropAnimation)
.add(wrapperAnimation);

return Promise.resolve(ani);
.addAnimation([backdropAnimation, wrapperAnimation]);
};
@@ -1,27 +1,28 @@
import { Animation } from '../../../interface';
import { IonicAnimation } from '../../../interface';
import { createAnimation } from '../../../utils/animation/animation';

/**
* iOS Alert 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('.alert-wrapper'));
wrapperAnimation
.addElement(baseEl.querySelector('.alert-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);

const ani = baseAnimation
return baseAnimation
.addElement(baseEl)
.easing('ease-in-out')
.duration(200)
.add(backdropAnimation)
.add(wrapperAnimation);

return Promise.resolve(ani);
.addAnimation([backdropAnimation, wrapperAnimation]);
};
@@ -1,25 +1,28 @@
import { Animation } from '../../../interface';
import { IonicAnimation } from '../../../interface';
import { createAnimation } from '../../../utils/animation/animation';

/**
* Md Alert 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('.alert-wrapper'));
wrapperAnimation
.addElement(baseEl.querySelector('.alert-wrapper'))
.keyframes([
{ offset: 0, opacity: 0.01, transform: 'scale(0.9)' },
{ offset: 1, opacity: 1, transform: 'scale(1)' }
]);

backdropAnimation.fromTo('opacity', 0.01, 0.32);

wrapperAnimation.fromTo('opacity', 0.01, 1).fromTo('scale', 0.9, 1);

return Promise.resolve(baseAnimation
return baseAnimation
.addElement(baseEl)
.easing('ease-in-out')
.duration(150)
.add(backdropAnimation)
.add(wrapperAnimation));
.addAnimation([backdropAnimation, wrapperAnimation]);
};
@@ -1,25 +1,25 @@
import { Animation } from '../../../interface';
import { IonicAnimation } from '../../../interface';
import { createAnimation } from '../../../utils/animation/animation';

/**
* Md Alert 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('.alert-wrapper'));
wrapperAnimation
.addElement(baseEl.querySelector('.alert-wrapper'))
.fromTo('opacity', 0.99, 0);

backdropAnimation.fromTo('opacity', 0.32, 0);

wrapperAnimation.fromTo('opacity', 0.99, 0);

return Promise.resolve(baseAnimation
return baseAnimation
.addElement(baseEl)
.easing('ease-in-out')
.duration(150)
.add(backdropAnimation)
.add(wrapperAnimation));
.addAnimation([backdropAnimation, wrapperAnimation]);
};
ProTip! Use n and p to navigate between commits in a pull request.
You can’t perform that action at this time.