multiple transition() on one element with no queue

[annam]

The problem was that on every transition() call, the css property "transition" got overwritten.

for example:

$(elm).transition({ opacity: 1, duration: 400, easing: 'ease', queue: false })
$(elm).transition({ rotate: 30, duration: 300, easing: 'in', queue: false })

would result in element css: "transition: rotate 300 ease-in"

i now merge the properties to generate the css: "transition: opacity 400ms ease, rotate 300ms ease-in"

also "unmerge" function allows to remove a property from the string (the whole string used to be cleared) when finished transitioning.

this also allows for the hardcoded "transition" properties on the element to be maintained, if we are transitioning some other property.

[facultymatt]

+1 trying this now

[rstacruz]

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);
}

[facultymatt]

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

[thdxr]

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

[lucasmotta]

+1

[chanpory]

+1

[ghost]

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!

[pingram3541]

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" });
});