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) { if (transforms.length) {
transforms.push('translateZ(0px)'); transforms.push('translateZ(0px)');
ele.style[CSS.transform] = transforms.join(' '); 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'; import {Animation} from './animation';
const DURATION = 550; const DURATION = 400;
const EASING = 'cubic-bezier(0.36,0.66,0.04,1)'; const EASING = 'cubic-bezier(0.36,0.66,0.04,1)';
const OPACITY = 'opacity'; const OPACITY = 'opacity';
const TRANSLATEX = 'translateX'; const TRANSLATEX = 'translateX';

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

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