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

smooth criminal

Browse Source
This commit is contained in:
Adam Bradley
2015-06-12 14:49:09 -05:00
parent d2c3ed1125
commit d698777421
12 changed files with 35 additions and 94 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
ionic/animations/animation.js
View File

@@ -1,6 +1,6 @@
import {CSS} from '../util/dom';
const RENDER_DELAY = 36;
let AnimationRegistry = {};
export class Animation {
@@ -190,12 +190,10 @@ export class Animation {
});
}
if (this._duration > 36) {
if (this._duration > RENDER_DELAY) {
// begin each animation when everything is rendered in their starting point
// give the browser some time to render everything in place before starting
setTimeout(() => {
kickoff();
}, 36);
setTimeout(kickoff, RENDER_DELAY);
} else {
// no need to render everything in there place before animating in
@@ -371,7 +369,7 @@ class Animate {
self.toEffect = parseEffect(toEffect);
self.shouldAnimate = (duration > 36);
self.shouldAnimate = (duration > RENDER_DELAY);
if (!self.shouldAnimate) {
return inlineStyle(ele, self.toEffect);

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

@@ -30,8 +30,6 @@ body {
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-backface-visibility: hidden;
}
ion-app {
@@ -62,8 +60,6 @@ ion-pane {
display: flex;
flex-direction: column;
transform: translateZ(0px);
}
.nav-item {
@@ -84,21 +80,6 @@ ion-pane {
flex: 1;
}
ion-navbar {
position: absolute;
width: 100%;
height: 100%;
min-height: 4.4rem;
order: $flex-order-toolbar-top;
transform: translateZ(0px);
display: none;
&.show-navbar {
display: flex;
}
}
ion-toolbar {
display: flex;
min-height: 4.4rem;
@@ -123,17 +104,3 @@ ion-content {
-webkit-overflow-scrolling: touch;
will-change: scroll-position;
}
// Hardware Acceleration
.transitioning {
.nav-item,
ion-navbar,
.back-button,
.navbar-title,
.navbar-item {
will-change: transform, opacity;
}
}

1
ionic/components/app/z-index.scss
View File

@@ -5,7 +5,6 @@
$z-index-content: 1 !default;
$z-index-swipe-handle: 5 !default;
$z-index-button: 10 !default;
$z-index-toolbar-border: 20 !default;
$z-index-list-border: 50 !default;
$z-index-aside-overlay: 80 !default;

13
ionic/components/button/button.scss
View File

@@ -25,14 +25,11 @@ $button-small-icon-size: 2.1rem !default;
// --------------------------------------------------
.button {
position: relative;
display: inline-flex;
flex-shrink: 0;
flex-flow: row nowrap;
align-items: center;
justify-content: center;
z-index: $z-index-button;
margin: $button-margin;
line-height: 1;
@@ -52,16 +49,6 @@ $button-small-icon-size: 2.1rem !default;
cursor: pointer;
user-select: none;
&:after {
// used to create a larger button "hit" area
position: absolute;
top: -6px;
right: -6px;
bottom: -6px;
left: -6px;
content: ' ';
}
}

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

@@ -11,9 +11,21 @@ $navbar-order: (
ion-navbar {
position: absolute;
width: 100%;
height: 100%;
min-height: 4.4rem;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
order: $flex-order-toolbar-top;
transform: translate3d(0px, -9999px, 0px);
&.show-navbar {
transform: translate3d(0px, 0px, 0px);
}
}
.navbar-inner {
@@ -31,6 +43,11 @@ ion-navbar {
}
}
.back-button-text {
display: flex;
align-items: center;
}
.navbar-title {
flex: 1;
order: map-get($navbar-order, 'title');
@@ -55,11 +72,6 @@ ion-title {
.navbar-item {
transform: translateZ(0px);
display: none;
&.show-navbar-item {
display: block;
}
}
.navbar-primary-item {

4
ionic/components/nav/pane.js
View File

@@ -115,10 +115,6 @@ export class Pane {
return this.domElement.offsetWidth;
}
isTransitioning(val) {
this.domElement.classList[val ? 'add' : 'remove']('transitioning');
}
showPane(val) {
this.domElement.classList[val ? 'add' : 'remove']('show-pane');
}

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

@@ -22,6 +22,7 @@ import {SecondPage} from './second-page';
'<p>First Page: {{ val }}</p>' +
'<p><button class="button" (click)="push()">Push (Go to 2nd)</button></p>' +
'<p><button class="button" [push-data]="pushData" [nav-push]="pushPage">Push w/ nav-push (Go to 2nd)</button></p>' +
'<icon class="ion-ios-arrow-back"></icon>' +
'<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>',

8
ionic/components/view/view-controller.js
View File

@@ -34,8 +34,8 @@ export class ViewController {
this.sbTransition = null;
this.sbActive = false;
this.id = ++itemIds;
this.childIds = -1;
this.id = ++ctrlIds;
this._ids = -1;
}
push(ComponentClass, params = {}, opts = {}) {
@@ -395,7 +395,7 @@ console.log('completeSwipeBack', completeSwipeBack)
}
add(item) {
item.id = this.id + '' + (++this.childIds);
item.id = this.id + '' + (++this._ids);
this.items.push(item);
}
@@ -442,4 +442,4 @@ const CACHED_STATE = 2;
const STAGED_ENTERING_STATE = 3;
const STAGED_LEAVING_STATE = 4;
let itemIds = -1;
let ctrlIds = -1;

4
ionic/components/view/view-item.js
View File

@@ -240,7 +240,6 @@ export class ViewItem {
The view is about to enter and become the active view.
*/
willEnter() {
this.pane && this.pane.isTransitioning(true);
this.instance && this.instance.viewWillEnter && this.instance.viewWillEnter();
}
@@ -249,7 +248,6 @@ export class ViewItem {
will fire, whether it was the first load or loaded from the cache.
*/
didEnter() {
this.pane && this.pane.isTransitioning(false);
this.pane && this.pane.showPane(true);
this.instance && this.instance.viewDidEnter && this.instance.viewDidEnter();
}
@@ -258,7 +256,6 @@ export class ViewItem {
The view has is about to leave and no longer be the active view.
*/
willLeave() {
this.pane && this.pane.isTransitioning(true);
this.instance && this.instance.viewWillLeave && this.instance.viewWillLeave();
}
@@ -267,7 +264,6 @@ export class ViewItem {
will fire, whether it is cached or unloaded.
*/
didLeave() {
this.pane && this.pane.isTransitioning(false);
this.instance && this.instance.viewDidLeave && this.instance.viewDidLeave();
}

6
ionic/transitions/ios-transition.js
View File

@@ -2,7 +2,7 @@ import {Transition} from './transition';
import {Animation} from '../animations/animation';
const DURATION = 1000;
const DURATION = 600;
const EASING = 'cubic-bezier(0.36,0.66,0.04,1)';
const OPACITY = 'opacity';
@@ -65,11 +65,11 @@ class IOSTransition extends Transition {
} else {
// forward direction
self.enteringView
.from(TRANSLATEX, OFF_RIGHT)
.from(TRANSLATEX, '99%')
.from(OPACITY, 1);
self.enteringTitle
.from(TRANSLATEX, OFF_RIGHT);
.from(TRANSLATEX, '97%');
self.leavingView
.to(TRANSLATEX, OFF_LEFT)

16
ionic/transitions/transition.js
View File

@@ -3,7 +3,6 @@ import {Animation} from '../animations/animation';
const SHOW_NAVBAR_CSS = 'show-navbar';
const SHOW_VIEW_CSS = 'show-view';
const SHOW_BACK_BUTTON = 'show-back-button';
const SHOW_NAVBAR_ITEM = 'show-navbar-item';
let TransitionRegistry = {};
@@ -24,7 +23,6 @@ export class Transition extends Animation {
self.enteringView.before.addClass(SHOW_VIEW_CSS);
self.add(self.enteringView);
// create animation for the entering item's "ion-navbar" element
if (opts.navbar !== false) {
let enteringNavbar = self.enteringNavbar = new Animation(enteringItem.navbarElement());
enteringNavbar.before.addClass(SHOW_NAVBAR_CSS);
@@ -34,28 +32,23 @@ export class Transition extends Animation {
let enteringBackButton = self.enteringBackButton = new Animation(enteringItem.backButtonElement());
enteringBackButton
.before.addClass(SHOW_BACK_BUTTON)
.fadeIn();
.fromTo('opacity', 0.02, 1)
enteringNavbar.add(enteringBackButton);
}
// create animation for the entering item's "ion-title" element
self.enteringTitle = new Animation(enteringItem.titleElement());
enteringNavbar.add(self.enteringTitle);
self.add(enteringNavbar);
self.enteringNavbarItems = new Animation(enteringItem.navbarItemElements())
self.enteringNavbarItems
.before.addClass(SHOW_NAVBAR_ITEM)
.fadeIn();
self.enteringNavbarItems.fromTo('opacity', 0.02, 1)
enteringNavbar.add(self.enteringNavbarItems);
}
if (leavingItem) {
// create animation for the entering item's "ion-view" element
self.leavingView = new Animation(leavingItem.viewElement());
self.leavingView.after.removeClass(SHOW_VIEW_CSS);
// create animation for the entering item's "ion-navbar" element
let leavingNavbar = self.leavingNavbar = new Animation(leavingItem.navbarElement());
leavingNavbar.after.removeClass(SHOW_NAVBAR_CSS);
@@ -65,14 +58,11 @@ export class Transition extends Animation {
.fadeOut();
leavingNavbar.add(leavingBackButton);
// create animation for the leaving item's "ion-title" element
self.leavingTitle = new Animation(leavingItem.titleElement());
leavingNavbar.add(self.leavingTitle);
self.leavingNavbarItems = new Animation(leavingItem.navbarItemElements())
self.leavingNavbarItems
.after.removeClass(SHOW_NAVBAR_ITEM)
.fadeOut();
self.leavingNavbarItems.fadeOut();
leavingNavbar.add(self.leavingNavbarItems);
self.add(self.leavingView, leavingNavbar);

11
scripts/e2e/ionic.template.html
View File

@@ -2,16 +2,11 @@
<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 rel="stylesheet" href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
<link href="/../../../../dist/css/ionic.css" rel="stylesheet">
<!--
<script src="/../../../node_modules/angular2/node_modules/zone.js/dist/zone.js"></script>
<script src="/../../../node_modules/reflect-metadata/Reflect.js"></script>
<script src="/../../../system.js"></script>
<script src="/../../../angular2.js"></script>
<script src="https://jspm.io/system@0.16.js"></script>
-->
<style>
/* hack to create tall scrollable areas for testing using <f></f> */