Конфликт между преобразованием -webkit и jQuery .animate()

Question

Обновление: Я настраиваю скрипку, и, похоже, она работает нормально - раздел, в котором сначала отображаются слайды, содержит карту Google - интересно, действительно ли это проблема.

Недавно я добавил карту переноса -webkit-transform в приложение 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 .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 преобразования может испортить его, добавить больше информации, как

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

Так поддерживается более браузерами и у вас есть запасной вариант. Я видел эту проблему несколько раз, однако я не могу гарантировать ее, так как я не тестировал ее с вашим кодом.

Answer 2

Свойство transform не работает с функцией animate() в jquery, поскольку функция animate() принимает значения, которые являются числовыми по своей природе. например. числовое значение (например, «margin: 30px»).

Свойство transform принимает значения, которые не являются числовыми.

Ссылка:http://www.w3schools.com/jquery/eff_animate.asp

Однако вы можете использовать «шаг функции» для достижения эффекта преобразования с живой или использовать транзитный плагин. http://ricostacruz.com/jquery.transit/

Надеюсь, что это поможет.