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

fps upgrades

Browse Source
This commit is contained in:
Adam Bradley
2015-05-28 15:16:09 -05:00
parent 471b2cede3
commit 0b96723a4d
11 changed files with 78 additions and 90 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -59,6 +59,8 @@ ion-navbar {
&.show-navbar {
display: flex;
}
transform: translateZ(0);
}
ion-view,
@@ -77,6 +79,8 @@ ion-view,
&.show-view {
display: flex;
}
transform: translateZ(0);
}
ion-toolbar {

6
ionic/components/nav-bar/nav-bar.scss
View File

@@ -51,6 +51,8 @@ ion-title {
// used to notify JS when the title has been rendered
animation-duration: 1ms;
animation-name: nodeInserted;
transform: translateZ(0);
}
.navbar-inner-title {
@@ -68,3 +70,7 @@ ion-title {
.navbar-title-hide {
opacity: 0;
}
.back-button {
transform: translateZ(0);
}

4
ionic/components/nav/test/basic/index.js
View File

@@ -8,7 +8,9 @@ import {FirstPage} from './pages/first-page';
@Component({ selector: 'ion-app' })
@View({
templateUrl: 'main.html',
template: `
<ion-nav [initial]="initial"></ion-nav>
`,
directives: [Nav]
})
class IonicApp {

15
ionic/components/nav/test/basic/main.html
View File

@@ -1,15 +0,0 @@
<ion-nav [initial]="initial"></ion-nav>
<style>
f {
display: block;
margin: 10px auto;
max-width: 200px;
height: 200px;
background: blue;
}
f:last-of-type {
background: red;
}
</style>

19
ionic/components/nav/test/basic/pages/first-page.html
View File

@@ -1,19 +0,0 @@
<ion-navbar *navbar><ion-title>First Page Header: {{ val }}</ion-title></ion-navbar>
<!-- <ion-toolbar>
First Page Sub Header: {{ val }}
</ion-toolbar> -->
<ion-content class="padding">
<p>First Page: {{ val }}</p>
<p>
<button class="button" (click)="push()">Push (Go to 2nd)</button>
</p>
<f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f>
<f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f>
</ion-content>

17
ionic/components/nav/test/basic/pages/first-page.js
View File

@@ -7,7 +7,22 @@ import {SecondPage} from './second-page';
@Component({selector: 'ion-view'})
@View({
templateUrl: 'pages/first-page.html',
template: `
<ion-navbar *navbar><ion-title>First Page Header: {{ val }}</ion-title></ion-navbar>
<ion-content class="padding">
<p>First Page: {{ val }}</p>
<p>
<button class="button" (click)="push()">Push (Go to 2nd)</button>
</p>
<f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f>
<f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f>
</ion-content>
`,
directives: [NavbarTemplate, Navbar, Content]
})
export class FirstPage {

34
ionic/components/nav/test/basic/pages/second-page.html
View File

@@ -1,34 +0,0 @@
<ion-navbar *navbar><ion-title>Second Page Header</ion-title></ion-navbar>
<!-- <ion-toolbar>
Second Page Sub Header
</ion-toolbar>
<ion-toolbar>
Second Page Sub Sub Header
</ion-toolbar> -->
<ion-content class="padding">
<p>
<button class="button" (click)="pop()">Pop (Go back to 1st)</button>
</p>
<p>
<button class="button" (click)="push()">Push (Go to 3rd)</button>
</p>
<f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f>
<f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f>
</ion-content>
<!-- <ion-toolbar>
Second Page Sub Footer
</ion-toolbar>
<ion-toolbar>
Second Page Footer
</ion-toolbar>
-->

19
ionic/components/nav/test/basic/pages/second-page.js
View File

@@ -7,7 +7,24 @@ import {ThirdPage} from './third-page';
@Component({selector: 'ion-view'})
@View({
templateUrl: 'pages/second-page.html',
template: `
<ion-navbar *navbar><ion-title>Second Page Header</ion-title></ion-navbar>
<ion-content class="padding">
<p>
<button class="button" (click)="pop()">Pop (Go back to 1st)</button>
</p>
<p>
<button class="button" (click)="push()">Push (Go to 3rd)</button>
</p>
<f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f>
<f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f>
</ion-content>
`,
directives: [NavbarTemplate, Navbar, Content]
})
export class SecondPage {

17
ionic/components/nav/test/basic/pages/third-page.html
View File

@@ -1,17 +0,0 @@
<ion-navbar *navbar><ion-title>Third Page Header</ion-title></ion-navbar>
<!-- <ion-toolbar>
Third Page Footer
</ion-toolbar> -->
<ion-content class="padding">
<p>
<button class="button" (click)="pop()">Pop (Go back to 2nd)</button>
</p>
<f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f>
<f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f>
</ion-content>

15
ionic/components/nav/test/basic/pages/third-page.js
View File

@@ -6,7 +6,20 @@ import {NavController, NavbarTemplate, Navbar, Content} from 'ionic/ionic';
@Component({selector: 'ion-view'})
@View({
templateUrl: 'pages/third-page.html',
template: `
<ion-navbar *navbar><ion-title>Third Page Header</ion-title></ion-navbar>
<ion-content class="padding">
<p>
<button class="button" (click)="pop()">Pop (Go back to 2nd)</button>
</p>
<f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f>
<f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f>
</ion-content>
`,
directives: [NavbarTemplate, Navbar, Content]
})
export class ThirdPage {

18
scripts/e2e/angular.template.html
View File

@@ -2,8 +2,24 @@
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
<!-- https://www.chromium.org/developers/design-documents/chromium-graphics/how-to-get-gpu-rasterization -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<link href="/css/ionic.css" rel="stylesheet">
<style>
/* hack to create tall scrollable areas for testing using <f></f> */
f {
display: block;
margin: 10px auto;
max-width: 200px;
height: 200px;
background: blue;
}
f:last-of-type {
background: red;
}
</style>
</head>
<body>