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

Filtering with jQuery Isotope leads to jerky animation

本文关键字：动画 不稳定 jQuery 同位素 过滤 使用      更新时间：2023-09-26

我在一个项目上使用同位素，但是在使用过滤器方法时遇到了一个问题。

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

下面的代码可以说明我的观点;滤镜可以应用，元素也可以动画，但是有明显的视觉跳跃: 

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中的某些东西导致了这个问题，但我无法清除它。

对我来说，问题是我有一个过渡应用到元素，这导致它是不稳定的。

我不知道这是否是同位素的问题，或者如果我们都在做同样的错误的事情，但我有同样的问题，并通过不使用percentPosition根本解决了它。同位素文档说使用percentPosition"减少[s]调整窗口大小的过渡"，所以我猜不使用它可能会导致性能问题。

相关文章：