Question

在向元素添加过渡并更改宽度和/或高度以及-webkit-transform：translate3d时，过渡动画会断断续续。它似乎首先为宽度/高度变化设置动画，然后将其部分转换，然后捕捉到最终平移位置。但是，当返回原始样式时，动画是平滑的。我只在Safari（8.0.6测试版）中看到过这种情况。这里有一些例子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/

为了演示，我使用jquery在单击按钮上向元素添加类，但在使用时首先注意到它：悬停以获得相同的效果。我在这里遗漏了什么，或者只是Safari的问题，有没有人知道解决方法？感谢。

Answer 1

尝试使用transform: scale()而不是更改宽度和高度。在这种情况下，您将获得平稳过渡。但是，您必须调整top＆amp; right或transform: translate3D()属性可将对象放回正确的位置。应该很容易。

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

结合大小和翻译过渡会导致Safari

1 个答案: