要素を回転させた場合のFireFoxのCSS幅遷移の欠落

Question

回転されたテキストで要素の幅をアニメートしてみます。

アニメーションはChrome、IE-11、Safariではスムーズに見えますが、FireFoxでは不安定です。

垂直div幅のアニメーションをよりスムーズに、きれいにするにはどうすればよいですか？ rotate(90.3deg);へ

SNIPPET

rotate(90deg);を変更

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

たぶん、あなたはを使用することができます10代わりに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

なりますが、この答えを読ん

に滑らかに表示されている： https://stackoverflow.com/a/27898708/3049893

Answer 3

コンテナの固定幅を作る問題.rotboxposition: absolute;への修正にこの問題を設定する

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

を解決するようです。なぜ私は考えていない。 :)

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>