Skip to content
This repository has been archived by the owner on Mar 13, 2018. It is now read-only.

Commit

Permalink
force animation complete after 5 seconds
Browse files Browse the repository at this point in the history
  • Loading branch information
Yvonne Yip committed Jun 20, 2014
1 parent 446c0b6 commit 011f69c
Showing 1 changed file with 12 additions and 0 deletions.
12 changes: 12 additions & 0 deletions core-animated-pages.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -292,6 +292,11 @@
},

applyTransition: function(src, dst) {
if (this.animating) {
this.cancelAsync(this.animating);
this.animating = null;
}

if (this.transitioning.indexOf(src) === -1) {
this.transitioning.push(src);
}
Expand Down Expand Up @@ -328,10 +333,17 @@

if (!this._transitionElements.length) {
this.complete();
} else {
this.animating = this.async(this.complete.bind(this), null, 5000);
}
},

complete: function() {
if (this.animating) {
this.cancelAsync(this.animating);
this.animating = null;
}

this.transitioning.forEach(function(t) {
t.removeAttribute('animate');
});
Expand Down

5 comments on commit 011f69c

@cayter
Copy link

@cayter cayter commented on 011f69c Sep 11, 2014

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hi there,

Is there a reason to enforce animation to complete after 5 seconds? I'm using a custom duration here which is only 300ms via window.CoreStyle.g.transitions.duration. If the animation is enforced to complete after 5 seconds, the hiding page will block the showing page after 5 seconds which is quite weird.

PS: It seems like the hiding page is invisible on top of the showing page and only hide completely after this 5 seconds.

@morethanreal
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The timeout is to handle the case if there's no transitionend for some reason, e.g. if no transition was run. I would expect if the transition with a duration of 300ms is run normally, complete will be called after ~300ms and the 5 second timeout will have no effect.

@cayter
Copy link

@cayter cayter commented on 011f69c Sep 12, 2014

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Oh ok. But the current situation is that this.complete() only gets called after 5 seconds regardless what duration I've set via window.CoreStyle.g.transitions.duration = '300ms' and it works totally fine if I change line 337 to:

this.animating = this.async(this.complete.bind(this), null, CoreStyle.g.transitions.duration);

Any clue on why this happens? Thanks.

@morethanreal
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

complete is also triggered by the transitionend event, see https://github.com/Polymer/core-animated-pages/blob/master/transitions/core-transition-pages.html#L121 .

@cayter
Copy link

@cayter cayter commented on 011f69c Sep 13, 2014

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Oh ok, thanks.

Please sign in to comment.