2

私は次のコードを持っています、

    gallery.css("transition-duration", duration + "ms");
    gallery.css("-webkit-transition-duration", duration + "ms");
    gallery.css("-moz-transition-duration", duration + "ms");
    gallery.css("-ms-transition-duration", duration + "ms");
    gallery.css("-o-transition-duration", duration + "ms");
    //inverse the number we set in the css
    var value = (distance < 0 ? "" : "-") + Math.abs(distance).toString();

    gallery.css("transform", "translate3d(" + value + "px,0,0)");
    gallery.css("-webkit-transform", "translate3d(" + value + "px,0,0)");
    gallery.css("-moz-transform", "translate3d(" + value + "px,0,0)");
    gallery.css("-ms-transform", "translate3d(" + value + "px,0,0)");
    gallery.css("-o-transform", "translate3d(" + value + "px,0,0)");

Chrome、andriod、Iphone で最適に動作します。ただし、IE 10 (モバイル) では動作せず、Firefox は部分的に動作します。Javascript/Jqueryでこれを解決する方法はありますか?

デモを見る

更新：私は主な問題を抱えていると思います。主な問題は、タッチ イベント (touchstart、touchend、touchmove) が IE 10 モバイルで機能しないことです。私はIE 10ポインターを使用しましたが、これは私にとって素晴らしい仕事です。みんな、ありがとう。

4

3 に答える 3

2

まだTranslate3dすべてのブラウザーでサポートされているわけではありませんが、FFで動作するはずです。Atm は、プレフィックスなしでサポートする唯一のブラウザーです。

transform-styleIE10 はwith をサポートしていないためpreserve-3d、これは問題になる可能性があります。それにもかかわらず、ここでは 3D 変換が可能です。

とにかく値を変更するだけなので、tranlate3dに変更することをお勧めします。これで問題が解決する可能性があります。また、一般的には、標準準拠の値を最後に宣言することをお勧めします (プレフィックス フリー フォーム)。translateXX

于 2013-04-24T10:34:59.053 に答える
2

絶対に覚えておくべきことの 1 つは、ベンダー固有のプレフィックスを使用する順序です。次のように言うことには違いがあります。

gallery.css("transition-duration", duration + "ms");
gallery.css("-webkit-transition-duration", duration + "ms");
gallery.css("-moz-transition-duration", duration + "ms");
gallery.css("-ms-transition-duration", duration + "ms");
gallery.css("-o-transition-duration", duration + "ms");

と...

gallery.css("-webkit-transition-duration", duration + "ms");
gallery.css("-moz-transition-duration", duration + "ms");
gallery.css("-ms-transition-duration", duration + "ms");
gallery.css("-o-transition-duration", duration + "ms");
gallery.css("transition-duration", duration + "ms");

このSOの質問の受け入れられた回答で述べたように：

どちらが最後に出て、-webkit-border-radius使用border-radiusされるものになります。

-webkit-border-radiusは「実験的な」プロパティです。実装には仕様からの逸脱が含まれる場合があります。の実装border-radiusは、仕様の内容と一致します。

「W3C 実装」が利用可能な場合は、それを使用して、それをサポートするすべてのブラウザー間で一貫性を確保することをお勧めします。

そうは言っても、現在の実装は、「W3C 実装」バージョンをベンダー固有の実験的プロパティでオーバーライドする可能性があることに注意してください。

あなたの質問に対するより具体的な答えに：

この表は、バージョンごとに、どのブラウザーのどのバージョンが 3d 変換 CSS のサポートを主張しているかについて、もう少し洞察を与えるかもしれません。

  1. インターネットエクスプローラ

    このブログ記事によると、IE 10 は CSS3 3D 変換を完全にサポートしています ( IE9は2-D 変換のみをサポートしており、以前のバージョンはそれをサポートしていなかったことに注意してください)。

  2. ファイアフォックス

    バグ 505115の修正時点で、Firefox は CSS3 3D 変換のサポートを主張しています。この例のページによると、Mozilla も変換をサポートしています (また、そのページを Firefox にロードした場合は、その方法を示しています)。

    残念ながら、Firefox でのより複雑なテストは失敗します。Chrome ではエレガントに動作するが FF では動作しない例については、このリンクを参照してください。確かに部分的なサポートですが、WebKit 実装のアニメーションはありません。

    注: テストのために Firefox 20.0.1 を使用しています。

  3. オペラ

    Opera はこの記事を提供して、変換のサポートについて説明しています。

最終結果:

主要なブラウザーのサポートは開始されていますが、ゆっくりです。将来のバージョンでは、より完全なサポートを主張していますが、各ベンダーは「完全」の意味について異なる定義を持っているようです。したがって、ウェブの世界ではいつものように... コーダーは注意してください...複数の環境でテストし、ブラウザが仕様に従って適切に機能することを信頼する前に、実際に何が機能するかを確認してください。

于 2013-04-29T22:07:20.417 に答える
1

Internet Explorer 固有の詳細については、変換に関連する Cascading Style Sheets (CSS) 機能に関するMSDN ドキュメントを参照してください。

transform-style プロパティを見ると、サポートしているように見えますtransform-style: flat

変換関数セクションには、translate3d() 関数がリストされています

このセクションには、Windows Internet Explorer でサポートされている Cascading Style Sheets (CSS) 変換関数のリファレンス ドキュメントが含まれています。2-D 変換のサポートは Windows Internet Explorer 9 で追加され、3-D 変換のサポートは Internet Explorer 10 で追加されました。

于 2013-04-24T11:11:16.737 に答える