Combining size and translate transitions causes st

问题:

When adding transitions to an element and altering the width and/or height and -webkit-transform:translate3d, the transition animation stutters. It appears to animate the width/height change first, as well translate it partially, then snaps to the final translated position. When returning to the original style, however, the animation is smooth. I'm only seeing this in Safari (version 8.0.6 tested). Here's some example css

#foo{
    width:100%;
    height:200px;
    border:1px solid black;
    position:relative; 
}

#poop{
    width:25px;
    height:25px;
    background-color:green;
    position:absolute;
    right:50%;
    top:50%;
    -webkit-transition: all 1s;
    transform:translate3d(0,0,0);
    -webkit-transform:translate3d(0,0,0);
}

#foo .blah{
    transform:translate3d(-100%,-100%,0);
    -webkit-transform:translate3d(-100%,-100%,0);
    width:100px;
    height:100px; }

And a jsfiddle http://jsfiddle.net/84w4hj99/4/

I'm using jquery to add a class to the element on a button click for the sake of demonstration, but first noticed it when using :hover to get the same effect. Am I missing something here or is it just a problem with Safari, and does anyone know a workaround? Thanks.

回答1:

Try using transform: scale() instead of changing the width and height. You will have a smooth transition in this case. However, you will have to adjust the top & right or transform: translate3D() properties to position your object back to the correct position. Should be easy.

See http://jsfiddle.net/y3xqak1z/