单击时的 CSS 过渡答案

【问题标题】：CSS transition on click单击时的 CSS 过渡
【发布时间】：2013-09-26 06:25:08
【问题描述】：

我正在使用 jquery 创建一个小型排序插件。

我想选择在点击事件时触发 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/

【问题讨论】：

你能做一个 jsfiddle，因为现在我们正在处理的内容有点模糊吗？
只是一种可能，我从未将 CSS visibility: hidden; 与 JS 结合使用，但它可能会起作用
@samrap 它仍然会影响其他元素，一般来说，如果你这样做了

标签： javascript jquery css animation

【解决方案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

【讨论】：

【解决方案2】：

我认为你必须为这样的东西编写的库是巨大的。在这种情况下，我强烈建议您实施Isotope by David DeSandro。

这就是你说的插件吗？我可以向您保证，当您想提出自己的解决方案时，您可以自己制造同位素。我已经实施了几次。您将学到很多东西，同时学习 jQuery/JS/CSS（和媒体查询）如何协同工作。

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

编辑： 我刚刚看到您找到的插件的链接...它实际上使用了 isotope 的框架，并建议您在某些情况下使用 isotope。

祝你好运！

【讨论】：