过渡翻译，宽度和高度在Safari中

同时有没有办法在Safari浏览器动画transform: translate，height和width在同一时间？我有一个错误。转换完成后，元素将跳过几个像素。这里是fiddle。过渡翻译，宽度和高度在Safari中

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>

来源

2017-08-09 Vesmy

并没有真正回答你的问题，但你尝试过使用'scale'呢？ https://jsfiddle.net/zv8u9jpb/ –

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

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>

来源

2017-08-09 09:15:23 Gerard

这没有解决safari上的问题：/ –

跳转发生，因为你的高度 - 和宽度值是基于像素的，你的变换是百分比，这导致子像素。尝试通过动画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>

来源

2017-08-09 09:29:32 jberglund

它的工作在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>

来源

2017-08-09 09:30:16

我认为问题是由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>

来源

2017-08-09 09:38:31

过渡翻译，宽度和高度在Safari中

回答

相关问题