Переход CSS при нажатии

Question

Я работаю над созданием плагина mini-sort с jquery.

Я хочу иметь возможность запускать анимацию css на событие click, но я обнаружил, что анимация не запускается на элементах, которые были скрыты с помощью display: none;.

Я попытался создать класс и применить этот класс к элементу, но это не сработает.

$('.legend li').on('click',function(){ 

     var thisClass = $(this).attr('class'); 

     $('div').not('.'+thisClass).removeClass('active'); 
     $('div.'+thisClass).addClass('active'); 
    }); 

Я нашел plugin, который имеет ту же функциональность, что я wan't, но я хотел бы, чтобы попытаться построить что-то меньше, и я всегда хотел, чтобы попытаться себя как опыт, прежде чем прибегать к плагинам. Я немного смущен тем, как они запускают анимацию. Это похоже на встроенный css, но когда я попытался добавить встроенные переходы, эффекта не было. Хотя я мог видеть переходы в теге стиля.

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

Вот скрипку. http://jsfiddle.net/NktDU/1/

Answer 1

Вы можете использовать JQuery-х hide и show вместо

Updated demo

$('#grid div').not('.'+thisClass).hide("fast").removeClass('active'); 
$('#grid div.'+thisClass).show("fast").addClass('active'); 

и удалить display:none из CSS

Или вы могли бы сделать это только с помощью CSS переходы и переключая ширину, как и

#grid div { 
    display: block; 
    height: 20px; 
    width: 0px; 
    margin:0px; 
    float: left; 
    -webkit-transition: all 1s ease; 
    -moz-transition: all 1s ease; 
    transition: all 1s ease; 
    background: black; 
} 
#grid .active { 
    width:20px; 
    margin: 2px; 
} 

Demo for that

Answer 2

Я думаю, что библиотека, которую вы должны написать для чего-то подобного, огромна. В этом случае я настоятельно рекомендую вам работать над внедрением Isotope by David DeSandro.

Это плагин, о котором вы говорили? Я могу заверить вас, что, хотя вы хотите придумать свое решение, вы можете сделать свой изотоп. Я реализовал его пару раз. Вы многому научитесь, и в то же время узнаете, как работают jQuery/JS/CSS (и медиа-запросы).

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

Edit: Я только что видел ссылку на плагин вы нашли ... это на самом деле использует структуру изотопа и рекомендует использовать изотоп в определенных ситуациях.

Удачи вам!