32

CSS3 トランジションに基づいて、非 jQuery レスポンシブ イメージ スライダーを作成しています。

構造は単純です: ビューポートと内部の相対的に配置された UL と、左側にフロートされた LI があります。

私はそのような状況で問題に直面しています:

  1. ユーザーが「前へ」の矢印をクリックします。
  2. JS は、現在表示されている LI ノードの前に適切な LI を追加します。
  3. none 0s linear今のところ、UL はアニメーションの変更を防ぐようにCSS トランジションを設定しています。この時点で、UL CSS の左の値をスライダー幅 (たとえば、0px から -1200px) だけ減らして、ビューを以前と同じにします。
  4. 現在、UL の遷移プロパティを に変更していall 0.2s ease-outます。
  5. 現在、UL の left プロパティを変更して、CSS3 アニメーションをトリガーしています。(たとえば、-1200px から 0px まで)。

何が問題ですか？ブラウザは変更を簡素化し、アニメーションを作成しません。

Stoyan Stefanov はここのブログでリフローの問題について書いていますが、この場合、要素にリフローを強制しようとしてもうまくいきません。

これは、これを行うコードの一部です (簡略化のためにブラウザーの接頭辞をスキップしました)。

ul.style.transition = 'none 0s linear 0s'; ul.style.left = '-600px'; ul.style.transition = 'all 0.2s ease-out'; ul.style.left = '0px';

実際の問題を確認するためのフィドルは次のとおりです。http://jsfiddle.net/9WX5b/1/

4

2 に答える 2

34

要素の をリクエストするoffsetHeightと、すべてうまくいきます。この関数を使用して、スタイルが変更された要素に渡すことで、リフローを強制できます。

function reflow(elt){
    console.log(elt.offsetHeight);
}

そして、リフローが必要な場所でこれを呼び出します。この例を参照してください: http://jsfiddle.net/9WX5b/2/

編集：最近これを行う必要があり、console.log よりも良い方法があるかどうか疑問に思いました。elt.offsetHeightオプティマイザ（少なくともChromeのもの）は、ゲッターが設定されていないプロパティにアクセスしているだけで、評価する必要もないため、リフローをトリガーしないため、独自のステートメントとして書くことはできません。したがって、私の知る限り、これを行うための最も安価な方法は、副作用があるvoid(elt.offsetHeight)かどうかが確実にわからないためです。void（オーバーライドされる可能性があります、idk）。

于 2014-02-09T21:14:35.003 に答える
6 
function reflow( element ) {
    if ( element === undefined ) {
        element = document.documentElement;
    }
    void( element.offsetHeight );
}

これは Chrome と FF で問題なく動作し、ATM を実行する最も簡単で移植性の高い方法のようです。

于 2017-07-18T18:41:47.903 に答える