Вычисление позиции / размеров вызывает CSS переход - PullRequest
Новая
       5

Вычисление позиции / размеров вызывает CSS переход

2 голосов
/ 27 марта 2012

Итак, вот странный маленький крайний случай:

Если вы присоедините элемент к DOM с помощью jQuery, а затем сразу же вызовете addClass, вы не получите переход CSS.Однако если вы вызовете position(), offset(), width(), css('left') или любой другой метод вычисления для любого элемента между вложением и вызовом addClass, вы получите CSSпереход.

Вот демонстрация (требуется WebKit): http://jsfiddle.net/TrevorBurnham/pGZFN/

Я хотел бы полностью понять, почему это происходит (бонусные баллы за ссылки на исходный код jQuery), ивыяснить, есть ли обходной путь.У меня есть сайт, на котором я хочу, чтобы вызов addClass был обусловлен позицией элемента, но я не хочу, чтобы обычный CSS-переход применялся к вновь созданному элементу.

Ответы [ 2 ]

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

Вот ответ, который работает в моей конкретной ситуации: клонируйте элемент, добавьте класс клону и замените оригинал клоном.

Демонстрация: http://jsfiddle.net/TrevorBurnham/dbn5p/

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

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

Если вы поместите addClass() в setTimeout() с задержкой в ​​одну миллисекунду, это также вызовет переход: 

var $box1 = $('<div class="box">').appendTo($('body'));;
var $box2 = $('<div class="box">').appendTo($('body'));;
setTimeout(function() {
    $box1.addClass('green');
    $box1.width();
    $box2.addClass('green');
}, 1);​

http://jsfiddle.net/pGZFN/4/

Однако, если вы добавите класс green в любой из блоков, прежде чем он будет добавлен в DOM, переход не произойдет: 

var $box2 = $('<div class="box green">').appendTo($('body'));;

http://jsfiddle.net/pGZFN/5/

Это заставляет меня заподозрить, что не какой-то конкретный метод расчета инициирует переход, а скорее микро-задержка, вызванная этим методом. Возможно, вы столкнулись с расой, когда класс добавляется до того, как div полностью добавлен в DOM.

В любом случае, я бы сказал, что самый безопасный способ предотвратить ваш переход - это сделать именно это - добавить класс к элементу до его добавления в DOM, вместо использования addClass() для этого позже.

...