Я пытаюсь применить переход css3 на лету, но jquery ничего не делает.

Код

var test = $("#test");
test.css("transition","all 500ms");

Я тоже пробовал

var delay = "500ms";

test.css({
    'transition': 'all ' + delay,
    '-moz-transition': 'all ' + delay,
    '-webkit-transition': 'all ' + delay,
    '-o-transition': 'all ' + delay
});

Что не так с моим кодом?

Обновлено:

«jquery ничего не делает» буквально означает, что он не применяет стиль к элементу. Я не имею в виду, что элемент не движется.

Исправление:

Это действительно работает ... это был мой браузер.

1
Moon 10 Мар 2012 в 03:52

3 ответа

Лучший ответ
var delay = "500ms",
    test  = $("#test");

test.css({
    'transition': 'all ' + delay,
    '-moz-transition': 'all ' + delay,
    '-webkit-transition': 'all ' + delay,
    '-o-transition': 'all ' + delay
}).on('click', function () {
    $(this).css({ left : '+=100' });
});​

http://jsfiddle.net/YwfjF/

Вы можете видеть, что это работает, но вам нужно изменить свойство, чтобы оно было анимировано.

Вот отличный справочник по переходам CSS3: https://developer.mozilla.org/en/CSS/ переход (обратите внимание на ссылки внизу, описывающие различные части объявления перехода).

0
Jasper 9 Мар 2012 в 23:59

Я не думаю, что вы понимаете, как работают переходы CSS3. Параметры перехода CSS3 управляют тем, как обрабатываются изменения свойств объекта и вступают ли они в силу немедленно или запускают ли переход, чтобы он переходил к новому значению с течением времени.

Для перехода у вас должно быть фактическое изменение свойства. Установка значения перехода сама по себе не запускает переход - она ​​просто устанавливает правила того, когда переход произойдет в будущем.

В вашем примере вам действительно нужно изменить какое-то значение, чтобы увидеть изменение. Например:

test.css("height", "100px");

Поскольку у вас есть transition: all, это вызовет переход от текущего значения высоты к новому значению высоты.

Например, вот переход CSS3, который я создал для другого вопроса пару дней назад: http://jsfiddle.net/jfriend00 / P2H4Z /.

В этом примере есть CSS, относящийся к переходу:

.element
{
    background: blue;
    position: absolute;
    left: -100%;
    padding: 0 10px;

    -moz-transition: left 1s; 
    -webkit-transition: left 1s; 
    -o-transition: left 1s; 
    -ms-transition: left 1s; 
     transition: left 1s; 
}


.element.seen {
    left: 0;
}

Это создает основу для перехода свойства left. Это не вызывает перехода. Переход может быть инициирован путем фактического изменения свойства left элемента с помощью class="element". Это изменение значения left может быть выполнено следующим образом:

  1. Добавление класса к элементу или родительскому элементу, в результате которого начинает действовать другое значение left по сравнению с правилами CSS.
  2. Запуск псевдокласса для вступления в силу (например, :hover)
  3. Программное изменение значения .left с помощью javascript.

В этом конкретном примере к объекту добавляется класс seen, в результате чего левое значение изменяется с -100% на 0. Поскольку transition left 1s определен, браузер перейдет от текущего значения -100% к новому значению 0 в течение 1 секунды, и, таким образом, объект переместится на место.

1
jfriend00 10 Мар 2012 в 00:11

Шаг 1: определите класс css для переходов:

.CustomTransitionClass{
    -webkit-transition:all 0.5s ease;
    -moz-transition:all 0.5s ease;
    -o-transition:all 0.5s ease;
    transition:all 0.5s ease;}

Шаг 2: добавьте класс:

 $("#test").addClass('CustomTransitionClass');
0
frenchie 10 Мар 2012 в 01:11