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

fix(aside): animation improvements

Browse Source
This commit is contained in:
Max Lynch
2015-09-04 14:30:04 -05:00
parent f60084f16e
commit 1fa21d9071
3 changed files with 11 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
ionic/components/aside/aside.scss
View File

@@ -61,7 +61,7 @@ $aside-shadow: -1px 0px 8px rgba(0, 0, 0, 0.2) !default;
box-shadow: 1px 2px 16px rgba(0, 0, 0, 0.3);
ion-aside-backdrop {
background-color: rgba(0,0,0,0.32);
opacity: 0.5;
}
}
}
@@ -116,7 +116,7 @@ ion-aside-backdrop {
left: 0;
bottom: 0;
position: fixed;
background-color: rgba(0,0,0,0);;
background-color: rgb(0,0,0);
}
.aside-content {

8
ionic/components/aside/aside.ts
View File

@@ -10,7 +10,9 @@ import * as util from 'ionic/util/util'
import {dom} from 'ionic/util'
/**
* TODO (?) add docs about how to have a root aside and a nested aside, then hide the root one
* Aside is a side-menu navigation that can be dragged out or toggled to show. Aside supports two
* display styles currently: overlay, and reveal. Overlay is the tradtional Android drawer style, and Reveal
* is the traditional iOS style. By default, Aside will adjust to the correct style for the platform.
*/
@IonicComponent({
selector: 'ion-aside',
@@ -218,7 +220,7 @@ export class Aside extends Ion {
host: {
'[style.width]': 'width',
'[style.height]': 'height',
'[style.backgroundColor]': 'backgroundColor',
'[style.opacity]': 'opacity',
'(click)': 'clicked($event)'
}
})
@@ -239,7 +241,7 @@ export class AsideBackdrop extends Ion {
this.aside = aside;
this.backgroundColor = 'rgba(0,0,0,0)';
this.opacity = 0;
}
/**

8
ionic/components/aside/extensions/types.ts
View File

@@ -42,15 +42,15 @@ const backdropManipulator = {
//.classList[sliding ? 'add' : 'remove']('no-transition');
},
setOpen(open) {
let amt = open ? 0.32 : 0;
this.aside.backdrop.backgroundColor = 'rgba(0,0,0,' + amt + ')';
let amt = open ? 0.5 : 0;
this.aside.backdrop.opacity = amt;
},
setTransform(t) {
if(t === null) {
t = this.aside.width();
}
let fade = 0.32 * t / this.aside.width();
this.aside.backdrop.backgroundColor = 'rgba(0,0,0,' + fade + ')';
let fade = 0.5 * t / this.aside.width();
this.aside.backdrop.opacity = fade;
}
}