1

タッチをサポートするデバイスでアニメーションのスライドショーを作成するためのクロスブラウザー ライブラリであるswipe.jsのソース コードを調べていました。

アニメーションを作成するために、swipe.js は CSS3 変換を使用します (必要に応じて Javascript アニメーションにフォールバックします)。したがって、実際の CSS3 変換を行うために使用する変換関数は次のとおりです。

 function translate(index, dist, speed) {

    var slide = slides[index];
    var style = slide && slide.style;

    if (!style) return;

    style.webkitTransitionDuration =
    style.MozTransitionDuration =
    style.msTransitionDuration =
    style.OTransitionDuration =
    style.transitionDuration = speed + 'ms';

    style.webkitTransform = 'translate(' + dist + 'px,0)' + 'translateZ(0)';
    style.msTransform =
    style.MozTransform =
    style.OTransform = 'translateX(' + dist + 'px)';

  }

したがって、基本的にこのクロスブラウザーを作成するには、Webkit、Mozilla、Microsoft、および Opera に対して異なる変換プロパティを設定する必要があります。私が理解できないのは、彼らがtranslate関数 (2 つの引数を取る) を webkit に使用し、単一引数のtranslateX関数を他のすべてに使用する理由です。

MozillaMicrosoftのドキュメントからわかる限り、両方のエンジンtranslatetranslateX. swipe.js の作成者がここで Webkit 以外のブラウザーに使用することにした理由はありtranslateXますか? translateXをサポートしているがサポートしていないブラウザは実際にありtranslateますか?

4

1 に答える 1