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

more iOS toolbar animation stuffs

Browse Source
This commit is contained in:
Adam Bradley
2015-05-15 15:50:39 -05:00
parent d9acceb82a
commit 1c1840e119
7 changed files with 44 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
ionic/components/nav/nav-item.js
View File

@@ -14,6 +14,7 @@ export class NavItem {
this.id = util.nextUid();
this.headerProtos = [];
this.toolbarViews = [];
this._titleEle = undefined;
this.disposals = [];
}
@@ -103,6 +104,21 @@ export class NavItem {
return elements;
}
getTitle() {
if (this._titleEle === undefined) {
let toolbarElements = this.getToolbars();
for (let i = 0; i < toolbarElements.length; i++) {
var titleEle = toolbarElements[i].querySelector('ion-title');
if (titleEle) {
this._titleEle = titleEle;
return this._titleEle;
}
}
this._titleEle = null;
}
return this._titleEle;
}
destroy() {
for (let i = 0; i < this.disposals.length; i++) {
this.disposals[i]();

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

@@ -1,14 +1,14 @@
import {Component, Directive} from 'angular2/src/core/annotations_impl/annotations';
import {View} from 'angular2/src/core/annotations_impl/view';
import {NavController, Header, Toolbar} from 'ionic/ionic';
import {NavController, HeaderTemplate, Toolbar} from 'ionic/ionic';
import {SecondPage} from './second-page';
@Component({selector: 'ion-view'})
@View({
templateUrl: 'pages/first-page.html',
directives: [Header, Toolbar]
directives: [HeaderTemplate, Toolbar]
})
export class FirstPage {
constructor(

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

@@ -1,14 +1,14 @@
import {Component, Directive} from 'angular2/src/core/annotations_impl/annotations';
import {View} from 'angular2/src/core/annotations_impl/view';
import {NavController, NavParams, Header, Toolbar} from 'ionic/ionic';
import {NavController, NavParams, HeaderTemplate, Toolbar} from 'ionic/ionic';
import {ThirdPage} from './third-page';
@Component()
@View({
templateUrl: 'pages/second-page.html',
directives: [Header, Toolbar]
directives: [HeaderTemplate, Toolbar]
})
export class SecondPage {
constructor(

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

@@ -1,13 +1,13 @@
import {Component, Directive} from 'angular2/src/core/annotations_impl/annotations';
import {View} from 'angular2/src/core/annotations_impl/view';
import {NavController, Header, Toolbar} from 'ionic/ionic';
import {NavController, HeaderTemplate, Toolbar} from 'ionic/ionic';
@Component()
@View({
templateUrl: 'pages/third-page.html',
directives: [Header, Toolbar]
directives: [HeaderTemplate, Toolbar]
})
export class ThirdPage {
constructor(

4
ionic/components/toolbar/extensions/ios.scss
View File

@@ -44,10 +44,6 @@ $toolbar-ios-button-background-color: transparent !default;
@include flex-order(map-get($toolbar-order-ios, 'secondary'));
}
.toolbar-inner-title {
}
ion-title {
@include flex-order(map-get($toolbar-order-ios, 'title'));
font-size: $toolbar-ios-title-font-size;

2
ionic/components/toolbar/toolbar.js
View File

@@ -93,7 +93,7 @@ new IonicComponent(Toolbar, {});
@Directive({
selector: 'template[header]'
})
export class Header {
export class HeaderTemplate {
constructor(navItem: NavItem, protoViewRef: ProtoViewRef) {
navItem.addHeader(protoViewRef);
}

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

@@ -33,6 +33,9 @@ class IOSTransition extends Animation {
// create animation for the entering toolbars
let enteringToolbars = new Animation(this.enteringItem.getToolbars());
// create animation for the entering title element
let enteringTitle = new Animation(this.enteringItem.getTitle());
// create animation for the leaving content
// leavingItem could be null, but the animation instance knows to do nothing
let leavingContent = new Animation(this.leavingItem && this.leavingItem.getContent());
@@ -41,6 +44,9 @@ class IOSTransition extends Animation {
// leavingItem could be null, but the animation instance knows to do nothing
let leavingToolbars = new Animation(this.leavingItem && this.leavingItem.getToolbars());
// create animation for the entering title element
let leavingTitle = new Animation(this.leavingItem && this.leavingItem.getTitle());
// entering item moves to center
// before starting, set enteringItem to display: block
enteringContent
@@ -48,11 +54,13 @@ class IOSTransition extends Animation {
.to(TRANSLATE_X, 0)
.to(OPACITY, 1);
enteringToolbars
.addStartClass('show-toolbar')
enteringTitle
.to(TRANSLATE_X, 0)
.to(OPACITY, 1);
enteringToolbars
.addStartClass('show-toolbar');
// leaving view moves off screen
// when completed, set leavingItem to display: none
leavingContent
@@ -61,7 +69,9 @@ class IOSTransition extends Animation {
.from(OPACITY, 1);
leavingToolbars
.removeEndClass('show-toolbar')
.removeEndClass('show-toolbar');
leavingTitle
.from(TRANSLATE_X, 0)
.from(OPACITY, 1);
@@ -73,16 +83,16 @@ class IOSTransition extends Animation {
.from(OPACITY, OFF_OPACITY)
.to(OPACITY, 1);
enteringToolbars
enteringTitle
.from(TRANSLATE_X, OFF_LEFT)
.from(OPACITY, OFF_OPACITY)
.from(OPACITY, 0)
.to(OPACITY, 1);
leavingContent
.to(TRANSLATE_X, OFF_RIGHT)
.to(OPACITY, 1);
leavingToolbars
leavingTitle
.to(TRANSLATE_X, OFF_RIGHT)
.to(OPACITY, 1);
@@ -92,21 +102,20 @@ class IOSTransition extends Animation {
.from(TRANSLATE_X, OFF_RIGHT)
.from(OPACITY, 1);
enteringToolbars
.from(TRANSLATE_X, OFF_RIGHT)
.from(OPACITY, 1);
enteringTitle
.from(TRANSLATE_X, OFF_RIGHT);
leavingContent
.to(TRANSLATE_X, OFF_LEFT)
.to(OPACITY, OFF_OPACITY);
leavingToolbars
leavingTitle
.to(TRANSLATE_X, OFF_LEFT)
.to(OPACITY, OFF_OPACITY);
.to(OPACITY, 0);
}
// set child animations
this.setChildren([enteringContent, enteringToolbars, leavingContent, leavingToolbars]);
this.setChildren([enteringContent, enteringToolbars, enteringTitle, leavingContent, leavingToolbars, leavingTitle]);
}
stage() {