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

feat(animations): init animation controller

Browse Source
This commit is contained in:
Adam Bradley
2017-08-03 08:50:27 -05:00
parent f0577e2aa7
commit f6781825ed
14 changed files with 245 additions and 214 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,15 +1,16 @@
import { Animation } from '../../../index';
/**
* iOS Loading Enter Animation
*/
export default function(baseElm: HTMLElement) {
const baseAnimation = new Ionic.Animation();
export default function(Animation: Animation, baseElm: HTMLElement) {
const baseAnimation = new Animation();
const backdropAnimation = new Ionic.Animation();
const backdropAnimation = new Animation();
backdropAnimation.addElement(baseElm.querySelector('.loading-backdrop'));
const wrapperAnimation = new Ionic.Animation();
const wrapperAnimation = new Animation();
wrapperAnimation.addElement(baseElm.querySelector('.loading-wrapper'));
backdropAnimation.fromTo('opacity', 0.01, 0.3);

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

@ -1,15 +1,16 @@
import { Animation } from '../../../index';
/**
* iOS Loading Leave Animation
*/
export default function(baseElm: HTMLElement) {
const baseAnimation = new Ionic.Animation();
export default function(Animation: Animation, baseElm: HTMLElement) {
const baseAnimation = new Animation();
const backdropAnimation = new Ionic.Animation();
const backdropAnimation = new Animation();
backdropAnimation.addElement(baseElm.querySelector('.loading-backdrop'));
const wrapperAnimation = new Ionic.Animation();
const wrapperAnimation = new Animation();
wrapperAnimation.addElement(baseElm.querySelector('.loading-wrapper'));
backdropAnimation.fromTo('opacity', 0.3, 0);

61
packages/core/src/components/loading/loading.tsx
View File

@ -1,5 +1,5 @@
import { Animation, AnimationBuilder, Ionic } from '../../index';
import { Component, Element, Event, EventEmitter, Listen, Prop, State } from '@stencil/core';
import { AnimationBuilder, Animation } from '../../index';
import iOSEnterAnimation from './animations/ios.enter';
import iOSLeaveAnimation from './animations/ios.leave';
@ -98,13 +98,17 @@ export class Loading {
}
// build the animation and kick it off
this.animation = animationBuilder(this.el);
Ionic.controller('animation').then(Animation => {
this.animation = new Animation();
this.animation.onFinish((a: any) => {
a.destroy();
this.ionViewDidEnter();
resolve();
}).play();
this.animation.onFinish((a: any) => {
a.destroy();
this.ionViewDidEnter();
resolve();
}).play();
});
}
dismiss() {
@ -115,31 +119,34 @@ export class Loading {
this.animation = null;
}
return new Promise<void>(resolve => {
this.ionLoadingWillDismiss.emit({ loading: this } as LoadingEvent);
return Ionic.controller('animation').then(Animation => {
return new Promise(resolve => {
this.ionLoadingWillDismiss.emit({ loading: this } as LoadingEvent);
// get the user's animation fn if one was provided
let animationBuilder = this.exitAnimation;
// get the user's animation fn if one was provided
let animationBuilder = this.exitAnimation;
if (!animationBuilder) {
// user did not provide a custom animation fn
// decide from the config which animation to use
// TODO!!
animationBuilder = iOSLeaveAnimation;
}
if (!animationBuilder) {
// user did not provide a custom animation fn
// decide from the config which animation to use
// TODO!!
animationBuilder = iOSLeaveAnimation;
}
// build the animation and kick it off
this.animation = animationBuilder(this.el);
this.animation.onFinish((a: any) => {
a.destroy();
this.ionLoadingDidDismiss.emit({ loading: this } as LoadingEvent);
// build the animation and kick it off
this.animation = animationBuilder(Animation, this.el);
this.animation.onFinish((a: any) => {
a.destroy();
this.ionLoadingDidDismiss.emit({ loading: this } as LoadingEvent);
Core.dom.write(() => {
this.el.parentNode.removeChild(this.el);
});
Core.dom.write(() => {
this.el.parentNode.removeChild(this.el);
});
resolve();
}).play();
resolve();
}).play();
});
});
}