CSS3過渡改變填充動畫

Question

期間由1個像素收縮元件I具有輸入字段具有大填充。當它是集中或含有填充值發生變化，這種變化是動畫與CSS3 transition: all 0.5s;問題是，在鍍鉻的過渡時間元素高度從42PX變爲41.998px和Chrome將呈現爲41px導致內容由1px的動畫過程中跳起來。

input { 
 
    padding: 10px; 
 
    transition:all 0.5s; 
 
} 
 

 
input:focus { 
 
    padding: 20px 10px 0; 
 
    outline:none; 
 
}

<input type="text">

Answer 1

這裏發生的事情是，你實際上是動畫2個屬性; padding-top正在從10px過渡到20px，而padding-bottom正在從10px過渡到0px。根據各種因素，您的瀏覽器可能難以在正好同時動畫兩種特性 - 尤其是當transition-property設置爲all - 導致某些元素的高度，目前，它的高度是通過將計算出的「閃爍」 line-height，padding和border。

解決此問題的一種方法是給元素一個特定的height，以便在轉換期間不必在每個階段計算該值。

input{ 
 
    border:1px solid #999; 
 
    box-sizing:border-box; 
 
    height:42px; 
 
    line-height:20px; 
 
    outline:0; 
 
    padding:10px; 
 
    transition:padding .5s; 
 
} 
 
input:focus{ 
 
    padding:20px 10px 0; 
 
}

<input>