Warning: No active transition timer

[prasand]

tram($('#main')).add('width 10s linear').start({width:'50%'}).then(function(){ console.log('success'); });

Works as it should, without any issues except on collections. However, the chain returns a warning in Firebug:

"No active transition timer. Use start() or wait() before then()."

[danro]

I'm not sure why you'd get that warning, but I do know that Firefox can be picky in regards to detecting transition changes. Try the following test, which sets width to 10% before the animation:

http://jsbin.com/AXuHiqEH/30/edit

[prasand]

The test ran fine without any warnings.

In hindsight, it's probable that my issues are specific to jQuery 2,1

I just removed any extra js inclusions and reduced it to jQuery 2.1 and Tram 0.7 ... the warning and "then" problem is there. So I'll chalk it up to a jQuery 2.1 thing. Those matters aside everything's working well with 2.1. ;)

[danro]

Interesting.. can you isolate it and provide a JSBin link? I'd like to fix it if possible.

[prasand]

Here's a primitive version of code reproducing the error and warning:

http://jsbin.com/penesafi/17

The error was never shown in the console, because the "then" was silently discarded. So I compensated for that using a setTimeout on line: 94. The console does however show the perpetually collecting warnings that occur on every transition. I tested for the warning in Firefox and Chrome, and they exist in both.

Hope this helps.

[danro]

I apologize for the lack of docs to support this, but here is the fix..

In the following code:

// slide out the current article, then reset its position
tram(page_articles[current_article]).start(adjust).then(function(){
  // then reset its position and continue the progress bar
  tram(page_articles[current_article]).set({left:page_width+'px'}).then(function(){
    article.progress(current_article);
  });
});

Once the first then() has fired, the queue is finished and the animation is complete.

Also, set() is instant, and not part of the queue, therefore cannot have a then() directly after. Your nested function should look something like this instead:

// then reset its position and continue the progress bar
tram(page_articles[current_article]).set({left:page_width+'px'});
article.progress(current_article);