Question

我正在尝试使用transform: translate()和其他一些属性在元素上进行平滑过渡。（是的，我读过有关匹配供应商前缀的信息。）

它在Chrome和FF中运行良好，但在Safari中它并不能平滑地为变换设置动画（最后跳转）。在应用翻译之前，似乎完全为宽度和填充设置了动画。注意：我不想要使用transform: scale()。

（与this question相同，超过一年没有回答。）

看到这个精简的小提琴： https://jsfiddle.net/aikenst/og2kLf31/

var square = document.getElementById("square"),
  bool = true;
setInterval(function() {
  if (bool) {
    square.className = "transformed";
  } else {
    square.className = "";
  }
  bool = !bool;
}, 3000);

#square {
  position: absolute;
  top: 10px;
  left: 10%;
  width: 100px;
  height: 0;
  padding-top: 80px;
  background: pink;
  -webkit-transform: translate(-50%, 5%);
  transform: translate(-50%, 5%);
  -webkit-transition: -webkit-transform 2s, width 2s, padding 2s;
  transition: transform 2s, width 2s, padding 2s;
}
#square.transformed {
  width: 50px;
  padding-top: 30px;
  -webkit-transform: translate(-50%, 65%);
  transform: translate(-50%, 65%);
}

<div id="square"></div>

在Safari（9.1）中转换变换和大小

0 个答案: