タッチをサポートするデバイスでアニメーションのスライドショーを作成するためのクロスブラウザー ライブラリである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
関数を他のすべてに使用する理由です。
MozillaとMicrosoftのドキュメントからわかる限り、両方のエンジンtranslate
がtranslateX
. swipe.js の作成者がここで Webkit 以外のブラウザーに使用することにした理由はありtranslateX
ますか? translateX
をサポートしているがサポートしていないブラウザは実際にありtranslate
ますか?