FirefoxのCSS Transitionsを止めるにはプロパティの上書きが必要
5281 ワード
内容
Off-Main-Thread Paintingが導入された頃から、CSS Transitionsがtransitionプロパティを削除するだけでは効果が止まらなくなりました。
開始したあとに止めるには、transition: none;のようなプロパティの上書きが必要になっているようです。
コード
トランジション中にtransitionプロパティのあるuseTransitionクラスを外していますが、2個目のdiv.boxはそのままトランジションを続行します。
HTML
<div class="box"></div>
<div class="box"></div>
CSS
.box {
width: 100px;
height: 100px;
background-color: #ff9500;
}
.box:not(.show) {
transform: scale(0);
}
.box.useTransition {
transition: transform 10s linear;
}
.box:nth-of-type(1):not(.useTransition) {
transition: none;
}
JavaScript
document.addEventListener('DOMContentLoaded', () => {
const box = document.querySelectorAll('.box');
Array.prototype.forEach.call(box, element => {
element.classList.add('useTransition');
element.offsetHeight; // reflow
element.classList.add('show');
});
setTimeout(function() {
Array.prototype.forEach.call(box, element => {
element.classList.remove('useTransition');
});
}, 5000);
});
Author And Source
この問題について(FirefoxのCSS Transitionsを止めるにはプロパティの上書きが必要), 我々は、より多くの情報をここで見つけました https://qiita.com/kuninori-ogino/items/80ed703e98e8bfa27df7著者帰属：元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .