Properties reset after transition

[Wargasmic]

I have a setup where i create objects with the transition properties that i want to use. These objects are meant to be reused again later (its for a slider, the transitions are reran each time the slide is reached). However after using the object in the transition, something is wrong with the properties. Easing and duration seem to be completely removed and the scale array becomes ["scale", x, y](whatever x and y were originally). There could be problems with other properties but i haven't got around to testing them all yet. Is this meant to happen? Maybe I'm missing something but for the time being I'm having to make a copy of the object and use the copy for the transition. This fixes the problem with the easing and duration, but scale is still messed up which i don't get. Here a fiddle http://jsfiddle.net/6DfJ9/7/

[d0b1010r]

Well I can not give any insights on what jquery.transit does with its property object, but what you experience with the scale object is normal. You did not perform a deep clone, so the array used for the scale property is used in both transition objects. Use jquery.extend(true, {}, object) for a deep clone (first argument).

See here for an updated version of your fiddle: http://jsfiddle.net/6DfJ9/8/

[Wargasmic]

Thanks for your reply, davidlanger.

In your updated fiddle you are logging the initial object(testTransition) after the transition is ran rather than the extended one(t). With or without a deep clone the cloned object has its properties messed up after being passed to the transition call. Here is an updated fiddle using a deep clone and logging t http://jsfiddle.net/6DfJ9/12/. The cloned object is the one I need to keep intact. I am extending the main object and storing it elsewhere in another (keyframe) object. The initial object is basically meant to be a blue print while the extended objects are updateable and used for actual transitions. Its basically a pattern where I have an element object which contains a keyframes object which contains a keyframe_groups object which contains an array of keyframe objects (this is a collection of what t is in the fiddle). The fiddle cuts all the other stuff out just to demonstrate the broken properties after the transition is ran. I have the exact same effect in my main code. As you can imagine in a looping slideshow, the properties need to remain intact. When it comes to the next loop, duration and easing become undefined therefore using the defaults and what was scale x and y (scale[x, y]) in the last pass is now scale "scale" and x (scale["scale", x, y]).

The transition call does its own extend of the properties passed on line 553 (var theseProperties = jQuery.extend(true, {}, properties);) and never touches the passed properties, only uses them in a css call on line 662($(this).css(properties);)

Easing, duration, complete, queue and delay are all deleted between lines 577 and 600, but they are deleted from theseProperties which is a clone of properties(the passed t) and local to transition() so how could this cause the passed object (t) to have these properties deleted?

Thanks!

[d0b1010r]

I debugged a little and look there:

622: $(this).css(properties);

This is the only place where theseProperties is not used! I modified your jsfiddle to load the modified jquery.transit. I also created a pull request (#205)

[rstacruz]

0.9.12 has been released today which fixes these. thanks everyone!

[Wargasmic]

Great stuff:) I did notice this but didn't realize that the css call altered the property object.