Переход не выполняется на повернутом элементе в CSS3 - PullRequest
0 голосов
/ 05 августа 2011

У меня есть следующий класс:

.rotate
{
  -webkit-transition: all 2s ease-in-out;
  -webkit-transform : rotateY(360deg);
}

, который я применяю при вызове функции:

 $('#mydiv').addClass('rotate');

Если я изменю 360 градусов на 180 градусов, мне кажется, что мой div повернут, но это происходит мгновенно, а не за 2 секунды. Таким образом, кажется, что переход не применяется вообще, но преобразование.

Есть идеи?

1011 * ТИА *

JD

Дополнительная информация:

Четко работает с кликом (спасибо другим ниже, это подтверждается).

У меня есть плагин (не мой), который позволяет пользователям вставлять анимацию в начале вызова плагина. Плагин сохраняет список элементов div в массиве, а затем перебирает их каждые 5 секунд и вставляет каждый из них в дерево DOM (а затем удаляет существующий). Поэтому, когда добавлен первый div, я ожидал, что переход запустится. Использование плагина заключается в следующем:

      $.jqTests.start({ cyclespeed : 5secs;
                        transitionanimationin : 
                           function(element) {
                           element.removeClass('non-active'); 
                           // display : none is removed.
                           element.addClass('rotate');}
                     });

Я обнаружил, что если я использую анимацию css3 (с ключевыми кадрами), анимация воспроизводится правильно. Но я не могу заставить работать переход, используя преобразования.

1 Ответ

0 голосов
/ 05 августа 2011
-webkit-transition-duration: 2s;

Попробуйте, что в CS3 этот стиль должен соответствовать стилю HTML.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...