2016-10-05 27 views
1

回転されたテキストで要素の幅をアニメートしてみます。要素を回転させた場合のFireFoxのCSS幅遷移の欠落

アニメーションは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>

+0

これは... https://bugzilla.mozilla.org/show_bug.cgi?id=739176 – darham

+0

は常にjQueryのアニメーションを使用することができます少し良く –

答えて

3

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

0

コンテナの固定幅を作る問題.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>

0

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

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>

関連する問題