如果元素旋转，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>