衝突之間-webkit變換和jQuery .animate（）

更新：我設置一個小提琴，它似乎很好地工作 - 在第一個幻燈片包含一個谷歌地圖在部分 - 我不知道這其實是問題.. 。衝突之間-webkit變換和jQuery .animate（）

我最近添加了一個-webkit轉換卡翻轉到我工作的HTML5應用程序。這具有造成水平移動的簡單轉盤顯示出一些奇怪行爲的不幸效果。

我的旋轉木馬的結構是這樣

<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。點擊（）通過它的行爲週期是這樣的：

$('#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上測試過，結果是一樣的。任何想法將不勝感激。

來源

2012-04-01 Meta Heavies

你有小提琴或在線演示嗎？ – Connor 2012-04-01 15:18:26

還沒有 - 我會設置一個。 – 2012-04-02 11:52:31

小提琴似乎在工作 - 在線演示在這裏：http://www.thaifloodwatch.com/mobile/ – 2012-04-02 12:13:38

只有那些具有WebKit的變換能搞砸了，添加更多的信息，如

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

所以它被更多的瀏覽器支持，你有一個備用。我已經多次看到這個問題，但是我不能保證它，因爲我還沒有用你的代碼進行測試。

來源

2012-04-20 08:29:07 Scriptor

由於animate（）函數只接受本質上爲數字的值，因此transform屬性不適用於jquery中的animate（）函數。例如。數字（比如「margin：30px」）。

transform屬性的值不是數值。

參考：http://www.w3schools.com/jquery/eff_animate.asp

但是你可以使用一個「階梯函數」實現與動畫變換效果或使用過境插件。 http://ricostacruz.com/jquery.transit/

希望這會有所幫助。

來源

2016-10-26 11:56:39

衝突之間-webkit變換和jQuery .animate（）

回答

相關問題