Конфликт между -webkit transform и jQuery .animate () - PullRequest
Новая
       43

Конфликт между -webkit transform и jQuery .animate ()

2 голосов
/ 01 апреля 2012

Обновление: я установил скрипку, и она, кажется, работает нормально - раздел, в котором первый слайд содержит карту 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, и результат тот же.Любые мысли будут оценены.

Ответы [ 2 ]

0 голосов
/ 26 октября 2016

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

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

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

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

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

0 голосов
/ 20 апреля 2012

Только с преобразованием 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);

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

...