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

title animation child of navbar animation

Browse Source
This commit is contained in:
Adam Bradley
2015-06-05 10:55:11 -05:00
parent fd0fde4890
commit c12d6a773f
2 changed files with 29 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
ionic/animations/animation.js
View File

@ -134,22 +134,18 @@ export class Animation {
} }
play() { play() {
var i; let i, l;
let promises = []; let promises = [];
let players = this._players;
for (i = 0; i < this._children.length; i++) { for (i = 0, l = this._children.length; i < l; i++) {
promises.push( this._children[i].play() ); promises.push( this._children[i].play() );
} }
if (!this._to) { if (!players.length) {
// probably just add/removing classes, create bogus transition
this._from = this._to = {'opacity': 1};
}
if (!this._players.length) {
// first time played // first time played
for (i = 0; i < this._el.length; i++) { for (i = 0; i < this._el.length; i++) {
this._players.push( players.push(
new Animate( this._el[i], new Animate( this._el[i],
this._from, this._from,
this._to, this._to,
@ -163,13 +159,15 @@ export class Animation {
} else { } else {
// has been paused, now play again // has been paused, now play again
for (i = 0; i < this._players.length; i++) { for (i = 0, l = players.length; i < l; i++) {
this._players[i].play(); players[i].play();
} }
} }
for (i = 0; i < this._players.length; i++) { for (i = 0, l = players.length; i < l; i++) {
promises.push(this._players[i].promise); if (players[i].promise) {
promises.push(players[i].promise);
}
} }
let promise = Promise.all(promises); let promise = Promise.all(promises);
@ -302,6 +300,13 @@ export class Animation {
class Animate { class Animate {
constructor(ele, fromEffect, toEffect, duration, easingConfig, playbackRate) { constructor(ele, fromEffect, toEffect, duration, easingConfig, playbackRate) {
if (!toEffect) {
// not an actual animation that tweens between from and to properties
// probably just adding/removing CSS classes, so resolve it right away
return;
}
// https://w3c.github.io/web-animations/ // https://w3c.github.io/web-animations/
// not using the direct API methods because they're still in flux // not using the direct API methods because they're still in flux
// however, element.animate() seems locked in and uses the latest // however, element.animate() seems locked in and uses the latest
@ -340,16 +345,18 @@ class Animate {
} }
play() { play() {
this.player.play(); this.player && this.player.play();
} }
pause() { pause() {
this.player.pause(); this.player && this.player.pause();
} }
progress(value) { progress(value) {
let player = this.player; let player = this.player;
if (!player) return;
// passed a number between 0 and 1 // passed a number between 0 and 1
value = Math.max(0, Math.min(1, value)); value = Math.max(0, Math.min(1, value));
@ -367,7 +374,9 @@ class Animate {
} }
playbackRate(value) { playbackRate(value) {
this.player.playbackRate = value; if (this.player) {
this.player.playbackRate = value;
}
} }
dispose() { dispose() {

6
ionic/transitions/transition.js
View File

@ -26,8 +26,9 @@ export class Transition extends Animation {
// create animation for the entering item's "ion-title" element // create animation for the entering item's "ion-title" element
this.enteringTitle = new Animation(enteringItem.titleElement()); this.enteringTitle = new Animation(enteringItem.titleElement());
this.enteringNavbar.addAnimation(this.enteringTitle);
this.addAnimation(this.enteringView, this.enteringNavbar, this.enteringTitle); this.addAnimation(this.enteringView, this.enteringNavbar);
if (leavingItem) { if (leavingItem) {
// create animation for the entering item's "ion-view" element // create animation for the entering item's "ion-view" element
@ -40,8 +41,9 @@ export class Transition extends Animation {
// create animation for the leaving item's "ion-title" element // create animation for the leaving item's "ion-title" element
this.leavingTitle = new Animation(leavingItem.titleElement()); this.leavingTitle = new Animation(leavingItem.titleElement());
this.leavingNavbar.addAnimation(this.leavingTitle);
this.addAnimation(this.leavingView, this.leavingNavbar, this.leavingTitle); this.addAnimation(this.leavingView, this.leavingNavbar);
} }
} }