$ .css ('transition', 'value') не работает - PullRequest
Новая
       6

$ .css ('transition', 'value') не работает

1 голос
/ 10 марта 2012

Я пытаюсь применить переход 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 не делает ничего" буквально означает, что он не применяет стиль к элементу.Я не имею в виду, что элемент не перемещается.

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

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

Ответы [ 3 ]

1 голос
/ 10 марта 2012

Не думаю, что вы понимаете, как работают переходы 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 с, и, таким образом, объект сдвинется на место.

0 голосов
/ 10 марта 2012

Шаг 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 голосов
/ 10 марта 2012 
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/transition (обратите внимание на ссылки внизу, которые описывают различные части декларации перехода).

...