title animation child of navbar animation

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

View File

@ -134,22 +134,18 @@ export class Animation {
}
play() {
var i;
let i, l;
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() );
}
if (!this._to) {
// probably just add/removing classes, create bogus transition
this._from = this._to = {'opacity': 1};
}
if (!this._players.length) {
if (!players.length) {
// first time played
for (i = 0; i < this._el.length; i++) {
this._players.push(
players.push(
new Animate( this._el[i],
this._from,
this._to,
@ -163,13 +159,15 @@ export class Animation {
} else {
// has been paused, now play again
for (i = 0; i < this._players.length; i++) {
this._players[i].play();
for (i = 0, l = players.length; i < l; i++) {
players[i].play();
}
}
for (i = 0; i < this._players.length; i++) {
promises.push(this._players[i].promise);
for (i = 0, l = players.length; i < l; i++) {
if (players[i].promise) {
promises.push(players[i].promise);
}
}
let promise = Promise.all(promises);
@ -302,6 +300,13 @@ export class Animation {
class Animate {
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/
// not using the direct API methods because they're still in flux
// however, element.animate() seems locked in and uses the latest
@ -340,16 +345,18 @@ class Animate {
}
play() {
this.player.play();
this.player && this.player.play();
}
pause() {
this.player.pause();
this.player && this.player.pause();
}
progress(value) {
let player = this.player;
if (!player) return;
// passed a number between 0 and 1
value = Math.max(0, Math.min(1, value));
@ -367,7 +374,9 @@ class Animate {
}
playbackRate(value) {
this.player.playbackRate = value;
if (this.player) {
this.player.playbackRate = value;
}
}
dispose() {

View File

@ -26,8 +26,9 @@ export class Transition extends Animation {
// create animation for the entering item's "ion-title" element
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) {
// 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
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);
}
}