fix modal animations

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: '<ion-view id="settings-modal"><ion-content padding><button primary (click)="close()">Close</button></ion-content></ion-view>',
-  directives: [Nav, Content]
+@IonicView({
+  template: '<ion-view id="settings-modal"><ion-content padding><button primary (click)="close()">Close</button></ion-content></ion-view>'
 })
-export class SettingsModal extends Modal {
-  constructor() {
-    super();
-  }
-}
+export class SettingsModal extends Modal {}
+
 
 @IonicComponent(Modal)
-@View({
-  template: '<ion-view id="heart-modal"><button icon (^click)="close()"><i class="icon ion-close"></i></button><h2>20</h2><p>You\'re pretty awesome</p></ion-view>',
-  directives: [Nav, Content]
+@IonicView({
+  template: '<ion-view id="heart-modal"><button icon (^click)="close()"><i class="icon ion-close"></i></button><h2>20</h2><p>You\'re pretty awesome</p></ion-view>'
 })
-export class HeartModal extends Modal {
-  constructor() {
-    super();
-  }
-}
+export class HeartModal extends Modal {}
+
 
 export function main(ionicBootstrap) {
   ionicBootstrap(IonicApp);

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;
 

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%');
   }
 }

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);
+  }
 }
 
 

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: `

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 => {