Fix for JQuery 1.8.0

[scien]

The other suggested solution (https://github.com/rstacruz/jquery.transit/pull/62) didn't work for me. This got all of my transitions working correctly.

[cheald]

I'd considered that approach, but won't that cause transition animations to fail if there are any existing transitions on the element (since the transition won't === "none")?

[scien]

if there were existing transitions, the transition would be some string, so it would crash trying to set anything. good catch (i tested and this was the case). if we replace

if(t === 'none') { t = new Transform(); }

with

if(!(t instanceof Transform)) { t = new Transform(); }

then it just overwrites the previous transform. I don't see why anyone would be setting transforms another way if they are using jquery.transit. if we wanted to preserve the previous transform we could parse the current string and pass it into the constructor. I don't think that's worth the effort though.

[cheald]

It may be desirable have a transform in CSS, that you then fall back to after some series of animations are done (I have this in my current project, actually!)

The series of steps looks something like:

.foo { -webkit-transform: translateX(-50px); }

animate({x: '300'}, function() { foo.css({"transform": ""}) })

This would animate to 300, then unset the transition on the element, letting it fall back to its previously-declared state (think about a "highlight this element" use case, for example). Previously this didn't conflict because jQuery wasn't automatically expanding the prefixes, but now that it is, foo.css("transform") will return whatever value is set for -webkit-transform.

[scien]

Interesting. That seems like an odd way to use a css property (explicitly setting the property to "" and expecting it to have a different behavior). Seems like there should be a special function for a case like that. animateAndReset() or something that would store the current value, do a transition, then restore the original value.

[cheald]

It's frequently useful for "reset to stock" situations, where you just want things back how they were before the animation was applied, without having to maintain and persist state yourself.

It's part of the official documentation, so I think it's probably intended ( http://api.jquery.com/css/ ):

Setting the value of a style property to an empty string — e.g. $('#mydiv').css('color', '') — removes that property from an element if it has already been directly applied, whether in the HTML style attribute, through jQuery's .css() method, or through direct DOM manipulation of the style property. It does not, however, remove a style that has been applied with a CSS rule in a stylesheet or style element.

[scien]

Cool. I didn't know that was the case. Feel free to kill this pull request and wait until you have a solution that handles that problem. I'll just stick with what I have in the meantime.

[cheald]

Do you have a test case that demonstrates what breaks with my namespace fix? If I have a better idea of what it's breaking, maybe it'll help me figure out a general fix.

[scien]

K, after some investigating it seems like it might not be that hard to fix. The problem is that only the last parameter of options is actually getting set when i run the transitions. a transition on perspective, rotateY, and skewY ends up with "-moz-transform: skewY(3deg)" instead of "-moz-transform: perspective(100px) rotateY(11deg) skewY(3deg)". and another transition ends up with just scale instead of x, y, and scale.