FirefoxのCSS Transitionsを止めるにはプロパティの上書きが必要

内容

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);
});