【问题标题】：Transition translate, width and height at same time in Safari在 Safari 中同时转换、宽度和高度
【发布时间】：2018-01-17 01:58:33
【问题描述】：
有没有办法在 Safari 中同时为 transform: translate、height 和 width 设置动画？我有一个错误。过渡完成后，元素会跳出几个像素。这里是fiddle。
div {
background-color: green;
height: 100px;
left: 200px;
position: absolute;
top: 200px;
transition: transform 1s, height 1s, width 1s;
width: 100px;
}
div:hover {
height: 150px;
width: 150px;
transform: translate(-50%, -50%);
}
<div></div>
【问题讨论】：
标签：
html
css
safari
transform
transition
【解决方案1】：
我认为问题是由您的元素的absolute 定位到body 引起的。过渡完成后，浏览器将absolute 位置重新计算到父元素，translate 会挡道。解决方案可能比您想象的要容易。
创建一个外部容器，以“保护”内部容器向左/顶部方向生长的位置。我认为下面的示例将解释其余部分。 （也在 Safari 中测试过！）
body {
/* just for better looks */
margin: 2rem;
}
/* out container zone */
.outer {
border: 1px solid #222;
width: 150px;
height: 150px;
position: relative;
}
/* inner element aligned to the right */
.inner {
background-color: green;
width: 100px;
height: 100px;
transition: all .5s;
position: absolute;
right: 0;
bottom: 0;
}
/* no translate, no problems */
.inner:hover {
width: 150px;
height: 150px;
}
<div class="outer">
<div class="inner">
</div>
</div>
【解决方案2】：
它在 Safari 上运行
您需要将-webkit- 与transition 和transform 一起使用
div {
background-color: green;
height: 100px;
left: 200px;
position: absolute;
top: 200px;
-webkit-transition: all 1s;
width: 100px;
}
div:hover {
height: 150px;
width: 150px;
height: 150px;
width: 150px;
-webkit-transform: translate(-50%, -50%);
}
<div></div>
【解决方案3】：
发生跳跃是因为您的高度和宽度值是基于像素的，而您的变换是百分比，这会产生子像素。尝试通过为scale 设置动画来改变您的方法（无论如何，尝试将动画限制为变换和不透明度总是一个好主意。请参阅this article 以供参考）。使用transform-origin 定义变换的原点。
div {
background-color: green;
height: 100px;
left: 200px;
position: absolute;
top: 200px;
transition: transform 1s;
width: 100px;
transform-origin: right bottom;
}
div:hover {
transform: scale(1.5);
}
<div></div>
【解决方案4】：
试试这个。我更改了过渡的定义。
div {
background-color: green;
height: 100px;
left: 200px;
position: absolute;
top: 200px;
transition: all 1s;
width: 100px;
}
div:hover {
height: 150px;
width: 150px;
transform: translate(-50%, -50%);
}
<div></div>