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

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

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 }

将CSS类用作状态机的最佳实践？

2 个答案: