Question

我正在使用jquery创建一个迷你排序插件。

我希望能够在click事件上触发css动画，但我发现动画不会被使用display: none;隐藏的元素触发。

我尝试创建一个类并将该类应用于元素，但这不起作用。

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

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

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

我发现plugin具有与我不同的功能，但我想尝试构建更小的东西，我总是喜欢尝试自己作为学习经验，然后再使用插件。关于他们如何运行动画，我有点困惑。它看起来像内联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');

并从CSS中删除display:none

或者你可以只使用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（和媒体查询）如何协同工作。

我已经实现了点击排序，我还通过关键字搜索创建了自己的排序。如果你愿意，我可以把几个小提琴放在一起......

修改我刚看到你发现的插件的链接......它实际上使用了同位素的框架，并建议你在某些情况下使用同位素。

祝你好运！

单击CSS转换

2 个答案: