Элемент изотопа - нажмите, чтобы увеличить не работает правильно

Question

Я пытаюсь настроить страницу изотопа (версия 2).

На этой странице есть элементы, по которым человек может щелкнуть, после чего поле увеличивается, а галерея перерисовывается.

Проблема в том, что при первом щелчке галерея не запускает перерисовку макета.

Вот код, который я использую:

$container.on( 'click', '.element', function() {
  // change size of item by toggling large class
  $( this ).toggleClass('large');
  $container.isotope('layout');
});

Вот jsFiddle с рабочим примером проблемы.

Вот что я пытаюсь достичь.

Как мне решить мою проблему и заставить галерею работать как задумано?

Answer 1

Как оказалось, этот код в моем CSS вызывал проблему:

.isotope, .element {
  -webkit-transition: all .4s;
  -moz-transition: all .4s;
  -o-transition: all .4s;
  transition: all .4s;
}

Удаление это решило мою проблему. Я бы предположил, что скорость перехода скинула макет.