From 8d2a0b1d60cbffa33e29fa276752f16af14436f3 Mon Sep 17 00:00:00 2001 From: Adam Bradley Date: Sat, 20 Jun 2015 23:02:00 -0500 Subject: [PATCH] fix modal animations --- ionic/components/app/test/snapcat/index.js | 58 +++++++++------------- ionic/components/aside/aside.js | 6 --- ionic/components/modal/modal.js | 28 +++++------ ionic/components/modal/modal.scss | 3 ++ ionic/components/modal/test/basic/index.js | 33 +++++++++++- ionic/components/overlay/overlay.js | 18 ++++--- 6 files changed, 82 insertions(+), 64 deletions(-) diff --git a/ionic/components/app/test/snapcat/index.js b/ionic/components/app/test/snapcat/index.js index 18929506b6..73fa8adbe8 100644 --- a/ionic/components/app/test/snapcat/index.js +++ b/ionic/components/app/test/snapcat/index.js @@ -5,8 +5,7 @@ import {Component, Directive} from 'angular2/src/core/annotations_impl/annotatio import {View} from 'angular2/src/core/annotations_impl/view'; import {FormBuilder, Control, ControlGroup, Validators, formDirectives} from 'angular2/forms'; -import {Modal, ModalRef, Nav, Segment, Animation, SegmentButton, Slides, Slide, Content, List, Item} from 'ionic/ionic'; -import {NavController, NavbarTemplate, NavParams, Navbar, IonicComponent} from 'ionic/ionic'; +import {IonicView, Animation, Modal, NavController, IonicComponent} from 'ionic/ionic'; class FadeIn extends Animation { @@ -15,8 +14,8 @@ class FadeIn extends Animation { this .easing('ease') .duration(250) - .from('opacity', 0) - .to('opacity', 1); + .fadeIn() + .before.addClass('show-modal'); } } @@ -28,17 +27,16 @@ class FadeOut extends Animation { this .easing('ease') .duration(250) - .from('opacity', 1) - .to('opacity', 0); + .fadeOut() + .after.removeClass('show-modal'); } } Animation.register('my-fade-out', FadeOut); @Component({ selector: 'ion-view' }) -@View({ - templateUrl: 'detail.html', - directives: [formDirectives, NavbarTemplate, Navbar, Content, List, Item] +@IonicView({ + templateUrl: 'detail.html' }) export class DetailPage { constructor(params: NavParams) { @@ -47,9 +45,8 @@ export class DetailPage { } @Component({ selector: 'ion-view' }) -@View({ - templateUrl: 'feed.html', - directives: [formDirectives, NgFor, NavbarTemplate, Navbar, Segment, SegmentButton, Content, List, Item] +@IonicView({ + templateUrl: 'feed.html' }) export class FeedPage { constructor(nav: NavController) { @@ -98,9 +95,8 @@ export class FeedPage { } @Component({ selector: 'ion-view' }) -@View({ - templateUrl: 'main.html', - directives: [formDirectives, Nav, Slides, Slide, Content, List, Item] +@IonicView({ + templateUrl: 'main.html' }) class IonicApp { constructor() { @@ -111,41 +107,35 @@ class IonicApp { openHeart() { console.log('openHeart'); - Modal.open(HeartModal)/*, { + Modal.open(HeartModal, { enterAnimation: 'my-fade-in', leaveAnimation: 'my-fade-out' }); - */ } openGear() { console.log('openGear'); - Modal.open(SettingsModal); + Modal.open(SettingsModal, { + enterAnimation: 'my-fade-in', + leaveAnimation: 'my-fade-out' + }); } } @IonicComponent(Modal) -@View({ - template: '', - directives: [Nav, Content] +@IonicView({ + template: '' }) -export class SettingsModal extends Modal { - constructor() { - super(); - } -} +export class SettingsModal extends Modal {} + @IonicComponent(Modal) -@View({ - template: '

20

You\'re pretty awesome

', - directives: [Nav, Content] +@IonicView({ + template: '

20

You\'re pretty awesome

' }) -export class HeartModal extends Modal { - constructor() { - super(); - } -} +export class HeartModal extends Modal {} + export function main(ionicBootstrap) { ionicBootstrap(IonicApp); diff --git a/ionic/components/aside/aside.js b/ionic/components/aside/aside.js index 9d0d8327c7..9ae1f7aff1 100644 --- a/ionic/components/aside/aside.js +++ b/ionic/components/aside/aside.js @@ -53,12 +53,6 @@ export class Aside { } onInit() { - this.side = this.side || 'left'; - this.type = this.type || 'reveal'; - - this.domElement.setAttribute('side', this.side); - this.domElement.setAttribute('type', this.type); - console.log('Aside content', this.content); this.contentElement = (this.content instanceof Node) ? this.content : this.content.domElement; diff --git a/ionic/components/modal/modal.js b/ionic/components/modal/modal.js index 834c253412..c781e12a7a 100644 --- a/ionic/components/modal/modal.js +++ b/ionic/components/modal/modal.js @@ -4,6 +4,12 @@ import {Animation} from '../../animations/animation'; export class Modal extends Overlay { + static get config() { + return { + selector: 'ion-modal' + } + } + constructor() { super(); this.extendOptions({ @@ -17,38 +23,30 @@ export class Modal extends Overlay { return this.create(ComponentType, opts); } - static get config() { - return { - selector: 'ion-modal' - } - } - } /** * Animations for modals */ -class ModalAnimation extends Animation { - constructor(element) { - super(element); - this.easing('cubic-bezier(.36, .66, .04, 1)').duration(400); - } -} - -class ModalSlideIn extends ModalAnimation { +class ModalSlideIn extends Animation { constructor(element) { super(element); this + .easing('cubic-bezier(.36,.66,.04,1)') + .duration(400) .fromTo('translateY', '100%', '0%'); } } Animation.register('modal-slide-in', ModalSlideIn); -class ModalSlideOut extends ModalAnimation { + +class ModalSlideOut extends Animation { constructor(element) { super(element); this + .easing('ease-out') + .duration(250) .fromTo('translateY', '0%', '100%'); } } diff --git a/ionic/components/modal/modal.scss b/ionic/components/modal/modal.scss index caa3ca1369..7588f5ea7d 100644 --- a/ionic/components/modal/modal.scss +++ b/ionic/components/modal/modal.scss @@ -28,6 +28,9 @@ ion-modal { background-color: $modal-bg-color; transform: translate3d(0px, 100%, 0px); + &.show-overlay { + transform: translate3d(0px, 0px, 0px); + } } diff --git a/ionic/components/modal/test/basic/index.js b/ionic/components/modal/test/basic/index.js index 547da93d8b..652e96080a 100644 --- a/ionic/components/modal/test/basic/index.js +++ b/ionic/components/modal/test/basic/index.js @@ -7,7 +7,32 @@ import {Parent, Ancestor} from 'angular2/src/core/annotations_impl/visibility'; import {IonicView} from 'ionic/ionic'; import {IonicComponent} from 'ionic/ionic'; -import {Modal, NavController, NavParams} from 'ionic/ionic'; +import {Modal, NavController, NavParams, Animation} from 'ionic/ionic'; + + +class FadeIn extends Animation { + constructor(element) { + super(element); + this + .easing('ease') + .duration(450) + .fadeIn(); + } +} + +Animation.register('my-fade-in', FadeIn); + +class FadeOut extends Animation { + constructor(element) { + super(element); + this + .easing('ease') + .duration(250) + .fadeOut(); + } +} + +Animation.register('my-fade-out', FadeOut); @Component({ selector: 'ion-view' }) @@ -16,7 +41,10 @@ import {Modal, NavController, NavParams} from 'ionic/ionic'; }) class IonicApp { openModal() { - Modal.open(ContactModal); + Modal.open(ContactModal, { + enterAnimation: 'my-fade-in', + leaveAnimation: 'my-fade-out' + }); } } @@ -31,6 +59,7 @@ export class ContactModal extends Modal { } } + @Component({selector: 'ion-view'}) @IonicView({ template: ` diff --git a/ionic/components/overlay/overlay.js b/ionic/components/overlay/overlay.js index b30ecec395..e6ebc74639 100644 --- a/ionic/components/overlay/overlay.js +++ b/ionic/components/overlay/overlay.js @@ -7,9 +7,10 @@ import * as util from 'ionic/util'; export class Overlay { /* Instance Methods */ - open(animation) { - animation = animation || this.options.enterAnimation; - let enterAnimation = Animation.create(this.domElement, animation); + open(opts) { + let animationName = (opts && opts.animation) || this.options.enterAnimation; + let enterAnimation = Animation.create(this.domElement, animationName); + enterAnimation.before.addClass('show-overlay'); ClickBlock(true, enterAnimation.duration() + 200); return new Promise(resolve => { @@ -21,13 +22,16 @@ export class Overlay { }); } - close(animation) { + close(opts) { return new Promise(resolve => { - animation = animation || this.options.leaveAnimation; - let leavingAnimation = Animation.create(this.domElement, animation); + let animationName = (opts && opts.animation) || this.options.leaveAnimation; + let leavingAnimation = Animation.create(this.domElement, animationName); + leavingAnimation.after.removeClass('show-overlay'); + ClickBlock(true, leavingAnimation.duration() + 200); leavingAnimation.play().then(() => { this._clean(); + ClickBlock(false); leavingAnimation.dispose(); resolve(); }) @@ -52,7 +56,7 @@ export class Overlay { overlay._dispose = ref.dispose; overlay.domElement = ref.elementRef.domElement; overlay.extendOptions(opts); - overlay.open(); + overlay.open(opts); resolve(overlay); }).catch(err => {