Ответ 1

Более чистый подход, который не полагается на setTimeout, заключается в том, чтобы прочитать соответствующее свойство css перед его настройкой:

var div = $('<div />').addClass('trans');
$('#container').append(div);
div.css('width');//add this line
div.css('width', '200px');

Работа здесь:

http://jsfiddle.net/FYPpt/144/

Как объясняется в комментариях ниже Лусеро, делать это таким образом необходимо, чтобы заставить браузер вычислять фактическое значение, а не "авто", "наследовать" или подобное. Без фактического значения браузер не будет знать новое значение как изменение предыдущего.

Ответ 2

вот два способа сделать это.

1 - переходы CSS

с помощью setTimeout метод addClass будет запускаться после, а не вместе с предыдущим script, чтобы событие transition срабатывало

пример jsfiddle

JQuery

var div = $('<div class="trans" />');
$('#container').append(div);
// set the class change to run 1ms after adding the div
setTimeout(function() {div.addClass('wide')}, 1); 

CSS

.trans {
    width: 20px;
    height: 20px;
    background-color: cyan;
    -webkit-transition: all 5s ease;
       -moz-transition: all 5s ease;
        -ie-transition: all 5s ease;
         -o-transition: all 5s ease;
            transition: all 5s ease;
}
.wide {
    width: 200px;
}

2 - функция jQuery .animate()

пример jsfiddle

JQuery

var div = $('<div class="trans" />');
$('#container').append(div);
div.animate({'width': '200px'}, 5000); // 5 sec animation

CSS

.trans {
    width: 20px;
    height: 20px;
    background-color: cyan;
}

Ответ 3

Попробуйте вызвать метод jQuery .offset().

Когда браузер получает смещение, он вызывает событие reflow/repaint/layout, которое позволяет переходу работать.

Смотрите эту скрипту: http://jsfiddle.net/FYPpt/199/

Также см. http://gent.ilcore.com/2011/03/how-not-to-trigger-layout-in-webkit.html

Ответ 4

В ответ на щедрость:

Если у вас нет роскоши узнать, какое свойство переводится, или просто не думайте, что это хорошая практика, чтобы заставить setTimeout активировать анимацию, вы можете принудительно произвести оплату другим способом.

Причина, по которой setTimeout работает в первую очередь, связана с тем фактом, что вы заново завершаете оплату документа, даже если продолжительность установлена ​​на 0. Это не единственный способ вызвать оплату.

Ссылка на скрипку

JavaScript

for (x = Math.ceil(Math.random() * 10), i=0;i<x;i++){
    $('<div />').appendTo($('#container')).addClass('trans');
}

var divs = $('#container div');
var x = divs.eq(Math.ceil(Math.random() * divs.length));
x[0].offsetHeight;
x.addClass('wide');

С помощью этого JavaScript мы произвольно добавляем между 1 и 10 элементами div, а затем выбираем одно из них случайным образом и добавляем класс wide.

Вы заметите нечетную строку JavaScript, а именно x[0].offsetHeight. Это лингвин для всей операции. Вызов offsetHeight инициирует возврат документа без использования setTimeout или запроса значения CSS.

Что такое reflow относительно DOM:

Планировка вычисляет макет страницы. Переплавка элемента пересчитывает размеры и положение элемента, а также триггеры дальнейшего перерасчета на эти элементы детей, предков и элементы, которые появляются после него в DOM. Затем он называет окончательный перекрашивать. Reflowing очень дорого, но, к сожалению, это может быть легко срабатывает.

Поэтому, пожалуйста, будьте осторожны в том, как вы используете эти функции. Не слишком большая проблема с большинством современных браузеров (поскольку jQuery известен тем, что уволил несколько перекопов), но все же что-то нужно рассмотреть, прежде чем добавлять что-то вроде этого решения на всем своем веб-сайте.

Важное примечание: Это не более или менее эффективно, чем вызов setTimeout. Это не волшебное решение пули, и оно делает то же самое под капотом.

Здесь соответствующий CSS для ссылки:

.trans {
    width: 20px;
    height: 20px;
    background-color: cyan;
    -webkit-transition: all 5s ease;
       -moz-transition: all 5s ease;
         -o-transition: all 5s ease;
            transition: all 5s ease;
}

.trans.wide {
    width: 200px;
}

Ответ 5

как спрашивал @onetrickpony, что, если все правила находятся в файле CSS и не должны добавляться в JS-функцию.

Основываясь на ответе Торина Финнемана, только с небольшим изменением:

Добавьте дополнительный класс, где определены правила: new-rules

var div = $('<div class="trans" />');
$('#container').append(div);

var div = $('<div />').addClass('trans');
$('#container').append(div);
div.height();
div.addClass('new-rules');

в вашем CSS есть предопределенный класс:

.trans.new-rules {
    width: 200px;
    background: yellow;
}

теперь при изменении CSS не нужно покалывать с JS. Измените его в CSS файле на new-rules:)

http://jsfiddle.net/FYPpt/201/

Ответ 6

var div = $('<div />');

$('#container').append(div);

div.css('width', '20px').addClass('trans', function() {
   div.css('width', '200px') 
});

Создает новый элемент DIV и добавляет класс 'trans' к этому элементу, чтобы запустить переход CSS