在Safari(9.1)中转换变换和大小

时间:2016-09-08 20:13:15

标签: css safari css-transitions transform transition

我正在尝试使用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>

0 个答案:

没有答案