過渡翻譯，寬度和高度在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中

回答

相關問題