Play nice with existing transforms

[benbarnett]

Existing transforms on elements are being overwritten when animating the left/top properties with this plugin.

Initial fix

• Cache existing transforms and re-apply after internal callbacks
• Ignore elements with existing translations (don't want to add too much weight with the Matrix calculations)

[mgcrea]

Had this issue with this div & a fadeTo animation :

    -webkit-transition: -webkit-transform 300ms ease-out;
    -webkit-transform : translate3d(0, -600px, 0);

    &.ui-state-active {
        -webkit-transform : translate3d(0, 0, 0);
    }

This seems to be a fix (when animated property is != from existing one) :

    -webkit-transition: -webkit-transform 300ms ease-out;
    -webkit-transition-property: all !important;
    -webkit-transform : translate3d(0, -600px, 0);

    &.ui-state-active {
        -webkit-transform : translate3d(0, 0, 0);
    }

Great work anyway, Regards,

[benbarnett]

This is exactly the sort of thing I want to fix. If only time was more generous. I'm working on it though, will post on here with progress.

[danro]

I think I am running into this issue as well. When I try to implement the following code on mouseover / mouseout, the transforms get reset if mouseout gets dispatched while the mouseover animation is playing, and the position of my tabs (in this case) go wacky.

function $tabOver () {
    $(this).stop().animate({top: "12px"},{queue:false, duration:200, easing:"easeOutQuart"})  
}
function $tabOut () {
    $(this).stop().animate({top: "20px"},{queue:false, duration:400, easing:"easeInOutQuart"})  
}

[benbarnett]

Yep that's a good example of this one. Thanks.