如何给ul li元素提供css效果？

Question

我是jQuery的新手，点击时我无法获得给ul li元素的css动画效果 过滤按钮，如mixitup（https://mixitup.kunkalabs.com/）。

所以我想在每次点击过滤按钮时给出css3动画效果。

为了说明这一点，

过滤html示例：

<div class="control-bar sandbox-control-bar">
    <div class="group">
        <label>Filter:</label>
        <span class="btn filter active" data-filter="all">All</span>
        <span class="btn filter" data-filter=".category-1">Blue</span>
        <span class="btn filter" data-filter=".category-2">Green</span>
        <span class="btn filter" data-filter="none">None</span>
    </div>
</div>

我们的网格元素：

<ul class="grid">

                        <li class="category-1"> 
                                <img src="img/thumb/1.png" alt="img01"/>

                        </li>

                        <li class="category-2">

                                <img src="img/thumb/2.png" alt="img02"/>
                        </li>
                        <li class="category-3">

                                <img src="img/thumb/3.png" alt="img02"/>
                        </li>

</ul>

所以我想获得给li元素的css动画效果，当点击过滤器按钮时，它会有过滤器按钮数据过滤器类。

为了清楚地理解我的问题，你可以检查mixitup（https://mixitup.kunkalabs.com/）。

感谢您的帮助。