CSS переход по клику

Question

CSS переход по клику

0

Я работаю над созданием плагина 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');
   });

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

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

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

hyperdrive 26 сен. 2013, в 00:01

Источник

Теги:

javascript

jquery

css

css3

animation

2 ответа

0

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

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

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

Изменить: я только что видел ссылку на плагин, который вы нашли... он на самом деле использует изотопную структуру и рекомендует использовать изотоп в определенных ситуациях.

Удачи!

webfrogs 25 сен. 2013, в 20:57

Ещё вопросы

Zach Saucier · Accepted Answer · 2013-09-25T20-34-00.000Z

Вместо этого вы можете использовать jQuery hide и show

Обновленная демоверсия

$('#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;
}

Демо для этого