Конфликт между -webkit transform и 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);

Это работает абсолютно нормально, пока я не добавлю CSS -webkit-transform для переворачивания карты:

#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

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

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