Изменение CSS с помощью JQuery 2.1+ игнорирует свойство перехода

Question

Я перехожу с jQuery 2.0.3 на 2.1.0.

Я заметил, что в v2.1.0 css transition свойство игнорируется при установке свойств css напрямую

$('#someElement').css('width','100px');

В версии 2.0.3 мой элемент будет поддерживать css переход, тогда как я теряю это в v2.1.0.

Мне интересно, почему это трактуется по-разному, и как я могу "включить" эффект перехода.

С помощью jQuery 2.0.3, css transition собственность вступает в силу

$(function() {
  $('.myClass').css('width', '100px');
});

.myClass {
  height: 50px;
  width: 300px;
  background-color: red;
  transition: width 3s;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<div class="myClass"></div>

С jQuery 2.1.0, CSS transition свойство игнорируется

$(function() {
  $('.myClass').css('width', '100px');
});

.myClass {
  height: 50px;
  width: 300px;
  background-color: red;
  transition: width 3s;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="myClass"></div>

Редактировать:

Я вижу это странное поведение в Chrome версии 47.0.2526.106 м

В Firefox 42.0 оба анимируются правильно

Answer 1

После поисков, я думаю, это может быть связано с изменениями, внесенными для проблемы #14164 во время выпуска v2.1.0. Согласно заголовку, "Уменьшите принудительные повторы макета в init или методы".

Я сравнил исходный код v2.0.3 с исходным кодом v2.1.0, и похоже, что какой-то рефакторинг был сделан вокруг .ready() метод и как события откладываются. Более конкретно, я думаю, что это может быть связано со строкой (ами) 3407-3408 в v2.1.0, где .ready() метод первоначально вызывается (этого не было в версии 2.0.3):

// Kick off the DOM ready check even if the user does not
jQuery.ready.promise();

---

Что касается обходного пути, кажется, что это поведение перехода является несовместимым во всех браузерах. Чтобы устранить проблему в Chrome, вы можете отложить выполнение кода и принудительно выполнить перерисовку.

setTimeout(function () {
  $('.myClass').css('width', '100px');
}, 0);

.myClass {
  height: 50px;
  width: 300px;
  background-color: red;
  transition: width 3s;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="myClass"></div>

---

В качестве альтернативы вы также можете загрузить jQuery после элементов DOM, переместив скрипт внизу страницы. Все еще непонятно, почему это имеет значение в Chrome, но не имеет значения в Firefox; это должно быть связано с тем, как DOM рисуется / раскрашивается после событий.

$('.myClass').css('width', '100px');

.myClass {
  height: 50px;
  width: 300px;
  background-color: red;
  transition: width 3s;
}

<div class="myClass"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>

Answer 2

Также кажется, что он работает с использованием animate() вместо css()

$('.myClass').animate({'width': '100px'});

.myClass {
  height: 50px;
  width: 300px;
  background-color: red;
  transition: width 3s;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="myClass"></div>