javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2026-03-13 10:22:08 +08:00
Code Issues Packages Projects Releases Wiki Activity

action menu animation improvements

Browse Source
This commit is contained in:
Adam Bradley
2015-08-28 20:57:50 -05:00
parent e0338f7c1c
commit cbb628b935
4 changed files with 13 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
ionic/components/action-menu/action-menu.scss
View File

@@ -30,6 +30,7 @@ action-menu-wrapper {
left: 0;
right: 0;
width: 100%;
display: block;
max-width: 500px;
margin: auto;

12
ionic/components/action-menu/action-menu.ts
View File

@@ -86,7 +86,7 @@ export class ActionMenu extends Overlay {
/**
* TODO
* @returns {TODO} TODO
* @returns {TODO} TODO
*/
get() {
return Modal.getByType(OVERLAY_TYPE);
@@ -103,7 +103,7 @@ const OVERLAY_TYPE = 'action-menu';
class ActionMenuAnimation extends Animation {
constructor(element) {
super(element);
this.easing('cubic-bezier(.36, .66, .04, 1)').duration(400);
this.easing('cubic-bezier(.36, .66, .04, 1)').duration(450);
this.backdrop = new Animation(element.querySelector('backdrop'));
this.wrapper = new Animation(element.querySelector('action-menu-wrapper'));
@@ -115,7 +115,7 @@ class ActionMenuAnimation extends Animation {
class ActionMenuSlideIn extends ActionMenuAnimation {
constructor(element) {
super(element);
this.backdrop.fromTo('opacity', 0, 0.4);
this.backdrop.fromTo('opacity', 0.01, 0.4);
this.wrapper.fromTo('translateY', '100%', '0%');
}
}
@@ -124,7 +124,7 @@ Animation.register('action-menu-slide-in', ActionMenuSlideIn);
class ActionMenuSlideOut extends ActionMenuAnimation {
constructor(element) {
super(element);
this.backdrop.fromTo('opacity', 0.4, 0);
this.backdrop.fromTo('opacity', 0.4, 0.01);
this.wrapper.fromTo('translateY', '0%', '100%');
}
}
@@ -134,7 +134,7 @@ Animation.register('action-menu-slide-out', ActionMenuSlideOut);
class ActionMenuMdSlideIn extends ActionMenuSlideIn {
constructor(element) {
super(element);
this.backdrop.fromTo('opacity', 0, 0.26);
this.backdrop.fromTo('opacity', 0.01, 0.26);
}
}
Animation.register('action-menu-md-slide-in', ActionMenuMdSlideIn);
@@ -142,7 +142,7 @@ Animation.register('action-menu-md-slide-in', ActionMenuMdSlideIn);
class ActionMenuMdSlideOut extends ActionMenuSlideOut {
constructor(element) {
super(element);
this.backdrop.fromTo('opacity', 0.26, 0);
this.backdrop.fromTo('opacity', 0.01.26, 0);
}
}
Animation.register('action-menu-md-slide-out', ActionMenuMdSlideOut);

4
ionic/components/app/structure.scss
View File

@@ -81,3 +81,7 @@ ion-pane {
flex: 1;
order: $flex-order-view-content;
}
root-anchor {
display: none;
}

3
ionic/util/util.scss
View File

@@ -100,7 +100,8 @@ backdrop {
width: 100%;
height: 100%;
background-color: $backdrop-color;
opacity: 0;
opacity: 0.01;
display: block;
transform: translateZ(0);
}