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

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