如果元素旋转，FireFox中的CSS宽度过渡波动

Question

尝试使用旋转的文本为元素的宽度设置动画。

动画在Chrome，IE-11，Safari中看起来很流畅但在FireFox中不稳定。

如何使垂直div宽度动画更加流畅和干净？

SNIPPET

 function animate() { var e = document.getElementById('rotbox1'); if (e.style.width == '120px') e.style.width = '200px'; else e.style.width = '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 { -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'); if (e.style.width == '120px') e.style.width = '200px'; else e.style.width = '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 { -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'); 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>