组合大小和转换过渡会导致Safari结结巴巴 [英] Combining size and translate transitions causes stutter in Safari

问题描述

在向元素添加转场并更改宽度和/或高度以及-webkit-transform：translate3d时，转场动画会停顿。它似乎先为宽度/高度更改设置动画，然后对其进行部分平移，然后捕捉到最终平移的位置。但是，当返回原始样式时，动画是平滑的。我仅在Safari（已通过8.0.6版测试）中看到此内容。这是css

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

和一个jsfiddle http://jsfiddle.net/84w4hj99/4/

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

我正在使用jquery将一个类添加到元素中在按钮上单击以进行演示，但是在使用：hover获得相同效果时首先注意到它。我是否在这里缺少某些东西，或者仅仅是Safari的问题，有人知道解决方法吗？谢谢。

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.

推荐答案

尝试使用 transform：scale（）而不是更改宽度和高度。在这种情况下，您将拥有一个平稳的过渡。但是，您必须调整 top & right 或 transform：translate3D（）属性可将对象重新定位到正确的位置。应该很容易。

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.

请参见 http://jsfiddle.net / y3xqak1z /

这篇关于组合大小和转换过渡会导致Safari结结巴巴的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！