如果元素旋轉，FireFox中的CSS寬度過渡波動

Question

嘗試使用旋轉的文本動畫元素的寬度。

動畫在Chrome瀏覽器，IE-11，Safari瀏覽器中看起來很順暢，但在FireFox中卻不穩定。

如何使垂直div寬度動畫更加流暢和乾淨？

代碼片段

function animate() { 
 
    var e = document.getElementById('rotbox1'); 
 
\t if (e.style.width == '120px') e.style.width = '200px'; else e.style.width = '120px'; 
 
    e = document.getElementById('rotbox2'); 
 
\t if (e.style.width == '120px') e.style.width = '200px'; else e.style.width = '120px'; 
 
} 
 

 
animate(); 
 

 
setInterval(animate, 2000);

.wrp-v { 
 
    -webkit-transform: rotate(90deg); 
 
    transform: rotate(90deg); 
 
    -webkit-transform-origin: right; 
 
    transform-origin: right; 
 
    padding-right: 30px; 
 
    position: absolute; 
 
    right: 30%; 
 
    bottom: 20%; 
 
    height: 40px; 
 
} 
 
.wrp-h { 
 
    padding-right: 30px; 
 
    position: absolute; 
 
    right: 30%; 
 
    bottom: 20%; 
 
    height: 40px; 
 
} 
 
.rotbox { 
 
    background: green; 
 
    color: white; 
 
    display: inline-block; 
 
    text-align: center; 
 
    height: 40px; 
 
    width: 200px; 
 
    line-height: 40px; 
 
    border-radius: 20px; 
 
    font-size: 16px; 
 
    -webkit-transition: width 2.0s ease; 
 
    transition: width 2.0s ease; 
 
}

<div class="wrp-v"> 
 
    <div class="rotbox" id="rotbox1">Hello world</div> 
 
</div> 
 

 
<div class="wrp-h"> 
 
    <div class="rotbox" id="rotbox2">Hello world</div> 
 
</div>

Answer 1

也許你可以使用writing-mode代替transform：

function animate() { 
 
    var e = document.getElementById('rotbox1'); 
 
    if (e.style.height == '120px') e.style.height = '200px'; 
 
    else e.style.height = '120px'; 
 
    e = document.getElementById('rotbox2'); 
 
    if (e.style.width == '120px') e.style.width = '200px'; 
 
    else e.style.width = '120px'; 
 
} 
 

 
animate(); 
 

 
setInterval(animate, 2000);

.wrp-v { 
 
    text-align: center; 
 
    -webkit-writing-mode: vertical-lr; 
 
    /* old Win safari */ 
 
    writing-mode: vertical-lr; 
 
    writing-mode: tb-lr; 
 
    direction: ltr; 
 
    padding-right: 30px; 
 
    position: absolute; 
 
    right: 30%; 
 
    bottom: 30%; 
 
} 
 
.wrp-h { 
 
    padding-right: 30px; 
 
    position: absolute; 
 
    right: 30%; 
 
    bottom: 20%; 
 
} 
 
.rotbox { 
 
    background: green; 
 
    color: white; 
 
    display: inline-block; 
 
    text-align: center; 
 
    height: 40px; 
 
    line-height: 40px; 
 
    border-radius: 20px; 
 
    font-size: 16px; 
 
    -webkit-transition: width 2.0s ease; 
 
    transition: width 2.0s ease; 
 
} 
 
#rotbox1 { 
 
    height: 200px; 
 
    -webkit-transition: height 2.0s ease; 
 
    transition: height 2.0s ease; 
 
}

<div class="wrp-v"> 
 
    <div class="rotbox" id="rotbox1">Hello world</div> 
 
</div> 
 

 
<div class="wrp-h"> 
 
    <div class="rotbox" id="rotbox2">Hello world</div> 
 
</div>

Answer 2

改變rotate(90deg);到rotate(90.3deg);做是看起來更平滑

讀這樣的回答： https://stackoverflow.com/a/27898708/3049893

Answer 3

使容器固定寬度似乎解決了問題

function animate() { 
 
    var e = document.getElementById('rotbox1'); 
 
\t if (e.style.width == '120px') e.style.width = '200px'; else e.style.width = '120px'; 
 
    e = document.getElementById('rotbox2'); 
 
\t if (e.style.width == '120px') e.style.width = '200px'; else e.style.width = '120px'; 
 
} 
 

 
animate(); 
 

 
setInterval(animate, 2000);

.wrp-v { 
 
    -webkit-transform: rotate(90deg); 
 
    transform: rotate(90deg); 
 
    -webkit-transform-origin: right; 
 
    transform-origin: right; 
 
    padding-right: 30px; 
 
    position: absolute; 
 
    right: 30%; 
 
    bottom: 20%; 
 
    height: 40px; 
 
    width: 200px; /* new */ 
 
} 
 

 
#rotbox1 { /* new */ 
 
    position: absolute; 
 
    right: 0px; 
 
} 
 
.wrp-h { 
 
    padding-right: 30px; 
 
    position: absolute; 
 
    right: 30%; 
 
    bottom: 20%; 
 
    height: 40px; 
 
} 
 
.rotbox { 
 
    background: green; 
 
    color: white; 
 
    display: inline-block; 
 
    text-align: center; 
 
    height: 40px; 
 
    width: 200px; 
 
    line-height: 40px; 
 
    border-radius: 20px; 
 
    font-size: 16px; 
 
    -webkit-transition: width 2.0s ease; 
 
    transition: width 2.0s ease; 
 
}

<div class="wrp-v"> 
 
    <div class="rotbox" id="rotbox1">Hello world</div> 
 
</div> 
 

 
<div class="wrp-h"> 
 
    <div class="rotbox" id="rotbox2">Hello world</div> 
 
</div>

Answer 4

設置.rotbox到position: absolute;修復此問題。但我不知道爲什麼。 :)

function animate() { 
 
    var e = document.getElementById('rotbox1'); 
 
\t if (e.style.width == '120px') e.style.width = '200px'; else e.style.width = '120px'; 
 
} 
 

 
animate(); 
 

 
setInterval(animate, 2000);

.wrp-v { 
 
    -webkit-transform: rotate(90deg); 
 
    transform: rotate(90deg); 
 
    -webkit-transform-origin: right; 
 
    transform-origin: right; 
 
    padding-right: 30px; 
 
    position: absolute; 
 
    right: 30%; 
 
    top: 20%; 
 
    height: 40px; 
 
} 
 

 
.rotbox { 
 
    position: absolute; 
 
    background: green; 
 
    color: white; 
 
    display: inline-block; 
 
    text-align: center; 
 
    height: 40px; 
 
    width: 200px; 
 
    line-height: 40px; 
 
    border-radius: 20px; 
 
    font-size: 16px; 
 
    -webkit-transition: width 2.0s ease; 
 
    transition: width 2.0s ease; 
 
    
 
    text-rendering: optimizeLegibility; 
 
}

<div class="wrp-v"> 
 
    <div class="rotbox" id="rotbox1">Hello world</div> 
 
</div>