0

私は本質的にステートマシンとして記述されたCSS3/Javascript UIに取り組んでおり、状態間の遷移（アニメーション）は完全にCSS3アニメーションと遷移で行われます。

現在、状態変化をトリガーするために、次のようなことをしています。

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

これは今のところ問題ないようで、すべてがWebkitベースのブラウザーで機能するようです。要素のレンダリングは、これらのコマンドの両方が実行されるまで更新されません（おそらく、javascriptの実行が終了するまで何も行われません）。ただし、一部のブラウザ（特にFirefox）のレイアウト/レンダリングの変更は、JavaScriptの実行中に発生する可能性があることを私は知っています。

これは私がこれを行うべき方法ですか？または、CSSクラスの交換に関して「状態変化」をトリガーするより良い方法はありますか？

4

2 に答える 2

1

.className割り当てる前に、正しい文字列を使用して準備することができます。

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

これにより、割り当てが中断することなく行われるようになります。classListIE≤9ではサポートされていないことに注意してください。

于 2012-12-08T09:17:09.523 に答える
0 

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 }

于 2016-02-08T12:25:41.810 に答える