Применение эффектов перехода CSS3 к элементам Bootstrap ⇐ CSS

[Anonymous]

У меня есть сетка элементов, упорядоченная с помощью Bootstrap (здесь jsFiddle):

Код: Выделить всё

1



2



3



4

У меня есть событие onclick, которое удаляет выбранный элемент:

Код: Выделить всё

$('.col-xs-3').click(function(){
$(this).remove();
});

Это отлично работает. Но эффект весьма неприятный — см. скрипку. Я хочу применить эффект перехода CSS3 к каждому col-xs-3, чтобы при его удалении оставшиеся элементы использовали переход для перемещения и заполнения пространства удаленного элемента, а не просто прыгали.

Я добавил следующий CSS, который не имеет никакого эффекта:

Код: Выделить всё

.col-xs-3{
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}

Как этого добиться?

Подробнее здесь: https://stackoverflow.com/questions/328 ... p-elements