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

perf(toolbar): improve toolbar transition performance

Browse Source
This commit is contained in:
Adam Bradley
2015-12-12 11:20:25 -06:00
parent 071af43742
commit 9c0bcecc8e
3 changed files with 8 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
ionic/animations/animation.ts
View File

@ -765,6 +765,8 @@ function inlineStyle(ele, effect) {
if (transforms.length) {
transforms.push('translateZ(0px)');
ele.style[CSS.transform] = transforms.join(' ');
} else {
ele.style[CSS.transform] = 'translateZ(0px)';
}
}
}

2
ionic/animations/ios-transition.ts
View File

@ -1,6 +1,6 @@
import {Animation} from './animation';
const DURATION = 550;
const DURATION = 400;
const EASING = 'cubic-bezier(0.36,0.66,0.04,1)';
const OPACITY = 'opacity';
const TRANSLATEX = 'translateX';

5
ionic/components/toolbar/toolbar.scss
View File

@ -29,6 +29,7 @@
border: 0;
pointer-events: none;
transform: translateZ(0px);
}
.toolbar[position=bottom] {
@ -39,6 +40,7 @@ ion-title {
flex: 1;
display: flex;
align-items: center;
transform: translateZ(0px);
}
.toolbar-title {
@ -53,6 +55,7 @@ ion-buttons {
display: block;
margin: 0 0.2rem;
pointer-events: none;
transform: translateZ(0px);
}
ion-buttons button,
@ -66,6 +69,7 @@ ion-buttons div {
// TODO this is a temp hack to fix segment overlapping ion-nav-item
ion-buttons,
.bar-button-menutoggle {
transform: translateZ(0px);
z-index: 99;
}
@ -73,6 +77,7 @@ ion-buttons,
// --------------------------------------------------
ion-navbar.toolbar {
transform: translateZ(0px);
display: flex;
opacity: 0;