-webkitトランスフォームとjQueryとの衝突.animate（）

Question

更新： 私はフィドルをセットアップして、うまくいくように見えます。最初にスライドするセクションにはGoogleマップが含まれています。

私は最近、作業しているHTML5アプリケーションに-webkit-transformカードのフリップを追加しました。これは水平に動く単純なカルーセルをいくつかの奇妙な振る舞いにするという不運な影響を与えます。

私のカルーセルは、この

<div id="wrapper"> 
    <div id="sections"> 
     <section id="startPage" class="page"> 
      <div id="card"> 
       <div class="face front"> 
        <p>Some content here</p> 
        <button id="flipFront">A label</button> 
       </div> 
       <div class="face back"> 
        <p>Some content here</p> 
        <button id="flipBack">A label</button> 
       </div> 
      </div> 
     </section> 
     <section></section> 
     <section></section> 
    </div> 
</div> 

そして、私のjQueryの.click（）、それを順番に行動のように構成されているが、このです：

$('#sections').stop().animate({"left": -($('#someDiv').position().left)}, 500);

私が追加されるまでこれは、絶対にうまく動作します-webkit-transform CSS用カード：

#startPage { 
    -webkit-perspective: 1000; 
} 

#card { 
    height: 940px; 
    width: 640px; 
    -webkit-transform-style: preserve-3d; 
    -webkit-transition: 0.5s; 
} 

.back { 
    -webkit-transform: rotateY(180deg); 
    background-color:#000; 
} 

.rotated{ 
    -webkit-transform: rotateY(180deg); 
} 

.back, .front { 
    height: 940px; 
    width: 640px; 
} 

.face {position: absolute;-webkit-backface-visibility: hidden;} 

私は

$('#setup, #back').click(function() { 
    $('#card').toggleClass('rotated'); 
}); 

を使用するときに今私のカードは細かい反転させそして、私のカルーセルはまだ動作しますが、立ち往生しているようだ - 例えばそれは部分的に滑り落ち、何らかの方法でdivと対話するまで正しい場所に固定されたままになります。その後、正しい場所にスナップします。

問題が

-webkit-transform-style: preserve-3d; 
-webkit-backface-visibility: hidden; 
-webkit-perspective: 1000; 

私はCSSからそれらを削除すると、カルーセルは正常に動作しますが、フリップにはないように見えます。

私はSafariとChromeの両方でテストしましたが、結果は同じです。いかなる考えも認められるだろう。

Answer 1

のみ

-webkit-transform: rotateY(180deg) scale(2); 
-moz-transform: rotateY(180deg) scale(2); 
-o-transform: rotateY(180deg) scale(2); 
-ms-transform: rotateY(180deg) scale(2); 

のようなより多くの情報を追加し、WebKitのは、缶混乱にそれを変換したので、それはより多くのブラウザでサポートされている、あなたはフォールバックを持っています。 私はこれが複数回問題であるのを見てきましたが、私はあなたのコードでそれをテストしなかったので、私はそれを保証することはできません。

Answer 2

jqueryのanimate（）関数でtransformプロパティが機能しないのは、animate（）関数が数値の値しか受け付けないためです。例えば。数値（「margin：30px」など）。

transformプロパティは数値ではない値をとります。

参考：あなたはアニメーション と変換の効果を達成またはトランジットプラグインを使用するための「ステップ関数」を使用することができますしかしhttp://www.w3schools.com/jquery/eff_animate.asp

。 http://ricostacruz.com/jquery.transit/

これが役に立ちます。