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