使用 jQuery 同位素过滤会导致动画不稳定

Question

我在项目中使用 Isotope，但在使用过滤方法时遇到了运行问题。

过滤列表可以很好地隐藏不需要的元素，但过渡动画并不像我认为的演示那样流畅。

下面的代码应该可以说明我的观点；过滤器应用并且元素做动画，但有明显的视觉跳跃：

var config = {
    itemSelector: '.grid_item',
    percentPosition: true,
    layoutMode: 'fitRows',
    fitRows: {
        gutter: '.grid_gutter'
    }
}

$('.grid').isotope(config);

$('.filter').on('click', function(){
    var type = $(this).attr('id');
    $('.grid').isotope({
        filter : '.' + type
    });
});

$('#clear').on('click', function(){
    $('.grid').isotope({
        filter : '*'
    });
});

html, body {
    margin: 0;
    padding: 0;
}

.grid {
    list-style: none;
    margin: 1em;
    padding: 0;
    text-indent: 0;
}

.grid_item {
    background: gray;
    margin: 0 0 1%;
    padding-top: 40%;
    position: relative;
    width: 49.5%;
}

.grid_text {
    color: #fff;
    position: absolute;
    top: 50%; left: 0; right: 0; bottom: 0;
    text-align: center;
}

.grid_gutter {
    width: 1%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.isotope/2.2.1/isotope.pkgd.js"></script>

<button class="filter" id="exit">Exit</button>
<button class="filter" id="creation">Creation</button>
<button id="clear">Clear</button>

<ul class="grid">
    <div class="grid_gutter"></div>
    <li class="grid_item exit">
        <span class="grid_text">Exit</span>
    </li>
    <li class="grid_item creation">
        <span class="grid_text">Creation</span>
    </li>
    <li class="grid_item creation">
        <span class="grid_text">Creation</span>
    </li>
</ul>

我认为是我的 CSS 中的某些东西导致了这个问题，但我无法清除它。

另外，参见 this fiddle。

Answer 1

我不知道这是 Isotope 的问题还是我们都在做同样的错误，但我遇到了同样的问题并通过完全不使用 percentPosition 解决了它。 Isotope documentation 说使用 percentPosition "reduce[s] adjustment transitions on window resize"，所以我猜不使用它可能会导致性能问题。

Answer 2

对我来说，问题是我对导致它不稳定的元素应用了过渡。将转换设置为 0s 为我修复了它。

使用 jQuery 同位素过滤会导致动画不稳定

Filtering with jQuery Isotope leads to jerky animation

javascript

jquery

css

animation

jquery-isotope