multiple transition() on one element with no queue - #68

+1 trying this now

Thanks! Looks a little huge to review right now, hope you don't mind I'll look into it after 1.0.0.

At first glance I think the solution could be much simpler than this. Transit only has to add transitions when they start, and remove them when they end, all without disturbing whatever transitions are already set.

This means that everytime you add a transition, you have to keep a copy of what you added, and take it out later on.

Here's some almost-working code:

function addTransition($element, transition) {
  // Get the old `transition` value
  var original = $element.css('transition');

  // Concatenate it with the new, and set it
  var updated = transition;
  if (original.length > 0) updated = original + ", " + transition;
  $element.css('transition', updated);

  // Now, your browser will probably mangle what you added. For
  // instance, if you added "opacity 300ms linear", Firefox translates
  // that to "opacity 300ms linear 0s".
  //
  // Let's figure out what the browser changed it to. The .substr()
  // covers for the original transition string and the ", " we added.
  // Remove these transitions after the transition has ended.
  return $element.css('transition').substr(original.length+2);
}

Has there been any progress on this? Has this feature been added to the plugin yet? Thanks!

I'm also interested in this, this plugin would be complete with this

+1

I'm also very interested in this. the project I'm working on runs multiple animations at once, and they can be any combination. jQuery is a little slow with this since some of the image sizes are large, so it would be nice if the plugin could do this. awesome plug in btw!

For clarity, is this why when I stack/queue transitions, the queue works the first time, animating each transition separately but on subsequent triggers they happen together (even if I reset all inline styles, i.e. $('.item').attr('style',''))?

For example:

$('.item').on('mouseenter', function(){
  $('.item').transition({ x: "30px" }).transition({ y: "30px" });
});

The first mouseenter event animates 30px on x axis and once complete animates 30px on y axis. On any future mouseenter events, both the x and y animations happen at the same time rather than stacked unless I do something like this.

$('.item').on('mouseenter', function(){
  $('.item').transition({ x: "0", y: "0", duration: "0" }).transition({ x: "30px" }).transition({ y: "30px" });
});