Call then() after something has had stop() called about tram

[danro]

Why not use start() to start it back up again?

[weotch]

Here's my use case: https://gist.github.com/weotch/9494115#file-view-js

It's for a carousel slider. I want to set the old slide to display:none after the new slide has finished transitioning. But if you're spamming clicks, the then() never gets fired. Here's me trying what I think you're talking about: https://gist.github.com/weotch/9494115#file-workbench-js

But that didn't solve it for me. Am I missing your point?

[danro]

In that case, I would suggest some sort of cleanup function that filters out the non-current slides and sets them to display:none, so you can call it after the current queue has finished.

[weotch]

I think I'll do this, just not use then() in this case.

// Change the page
View.change = function(e, new_page) {

    // Make sure old page has lower z-index and stop any trams.
    // Note: calling set() invokes stop()
    var old = this.$slides.eq(e.previous('page')).tram()
        .set({'z-index': 1})
    ;

    // Hide the old one after the transition is done.  Don't use
    // then() because it won't be fired if the animation is stopped.
    _.delay(function() {
        old.set({display: 'none'});
    }, 300);

    // Animate in new page
    this.$slides.eq(new_page).tram()
        .add('opacity 300ms')
        .set({ display: 'block', opacity: 0, 'z-index': 2} )
        .start({ opacity: 1})
    ;

};

Feel free to close the ticket if this isn't something you think is needed in tram.

[danro]

You could also use the tram.delay utility to ensure the timing stays in sync with the animations:

tram.delay(300, function () {
  // Hide non-current slides, but remember when this executes, the current slide may be changed ;)
});

[weotch]

Oh, thanks for the tip.