Question

有没有办法在 Safari 中同时为transform: translate，height和width制作动画？我有一个错误。转换完成后，元素将跳几个像素。这是fiddle。

＆＃13;

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

＆＃13;

<div></div>

＆＃13;

Answer 1

试试这个。我改变了过渡的定义。

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>

Answer 2

跳跃的发生是因为您的高度和宽度值是基于像素的，并且您的变换是百分比，这会产生子像素。尝试通过设置scale动画来改变您的方法（无论如何，尝试将动画限制为变换和不透明度总是一个好主意。请参阅this article以供参考）。使用transform-origin定义转换的原点。

＆＃13;

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

＆＃13;

<div></div>

＆＃13;

Answer 3

它正在使用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>

Answer 4

我认为问题是由absolute元素定位到body引起的。转换完成后，浏览器会重新计算父元素的absolute位置，translate即将发生。解决方案可能比您想象的要容易。

创建一个外部容器，＆＃34;保险箱＆＃34;内部容器在左/上方向生长的位置。我想下面的例子将解释其余部分。 （在safari中测试过！）

＆＃13;

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

＆＃13;

<div class="outer">
  <div class="inner">
  </div>
</div>

＆＃13;

在Safari中同时转换平移，宽度和高度

4 个答案: