javascript - 使用 CSS 类作为状态机的最佳实践？

Question

我正在开发一个基本上作为状态机编写的 CSS3/Javascript UI，状态（动画）之间的转换完全在 CSS3 动画和转换中完成。

现在，要触发状态更改，我正在执行以下操作：

function changeState(oldState, newState) {
     element.classList.remove(getCSSClassName(oldState));
     element.classList.add(getCSSClassName(newState));
}

现在这似乎很好，并且一切似乎都可以在基于 webkit 的浏览器中运行。在运行这两个命令之前，元素的呈现不会更新（在 javascript 执行结束之前可能什么都没有）。但是，我知道某些浏览器（尤其是 firefox）布局/渲染更改可能会在 javascript 执行过程中发生。

这是我应该这样做的吗？或者在交换 CSS 类方面是否有更好的方法来触发“状态更改”？

Answer 1

您可以.className在分配之前使用并准备正确的字符串：

function changeState(oldState, newState) {
     var str = element.className;
     str = str.replace(getCSSClassName(oldState),"");
     str = str + getCSSClassName(newState);
     element.className = str;
}

这将确保在没有中断的情况下完成分配。注意classListIE≤9 不支持。

Answer 2

class Animator {
  constructor(strClass) {
    this.slide = document.querySelector(strClass)
    this.slideOriginClass = this.slide.className;
  }
  set(num) {
    this.slide.className = this.slideOriginClass + ' state-' + num
  }
  get() {
    console.log(this.slide.classList.length);
  }
};

var animator = new Animator('.slide');
animator.set(4)
setTimeouta( ()=> { animator.set(1) , 1000 }