javascript - 同位素项目正在跳跃

Question

我正在使用 wordpress 和 isotope 创建一个投资组合网站。出于某种原因，每次对同位素项目进行排序时，它们都会在之后进行不和谐的跳跃。这是一个演示问题的 jsfiddle:

http://jsfiddle.net/tovly/8k6hyyzL/

这是演示问题的视频:

https://drive.google.com/file/d/0B5OxMCWiLhrMcmZUYm56YkFzdGs/view?usp=sharing

此问题仅在第一次对每个图 block 进行排序时出现。我怎样才能阻止这种情况发生？这些是我的同位素设置:

$container.isotope({ 
        itemSelector : '.item', 
        layoutMode : 'masonry',
        masonry: {
                isFitWidth: true,
             columnWidth: 60,
            gutter: 10

        }
    });

Answer 1

我通过简单地删除我添加到同位素项目的转换过渡来解决我的问题。我还从该过渡中删除了“!重要”。我添加的过渡(悬停过渡)现在似乎可以很好地与同位素添加的过渡配合使用。

旧的非工作代码:

.isotope-item {
    transition: transform 0.5s, opacity 0.5s, background-color 0.25s linear, 
    border-color 0.25s linear !important;
}

新的工作代码:

.isotope-item {
    /*I removed "transform 0.5s" and "!important"*/
    transition: opacity 0.5s, background-color 0.25s linear, border-color 0.25s linear;
}

我创建了一个精简的 jsfiddle 来帮助我更轻松地解决问题。固定行是第 10 行。

https://jsfiddle.net/tovly/w0avjdx9/