同位素项目正在跳跃

Question

我正在使用wordpress和同位素创建一个投资组合网站。 出于某种原因，每次对同位素项目进行分类时，它们都会在之后发生震动。 这是一个证明问题的jsfiddle：

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

这是一个展示问题的视频：

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

该问题仅在每个磁贴第一次排序时发生。 我怎么能阻止这种情况发生？ 这些是我的同位素设置：

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

        }
    });

Answer 1

我已经解决了我的问题，只需删除我添加到同位素项目中的变换过渡。 我还从那个过渡中删除了“！important”。 我添加的转换（悬停转换）现在似乎与同位素添加的转换很好地协作。

旧的非工作代码：

.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/

Answer 2

首先，这个问题与Wordpress无关。 这是jQuery问题。 你添加两次同位素代码。 删除第一个附加。 所以编辑你的文件：

jQuery(function ($) {

    var $container = $('#isotope-list'); //The ID for the list with all the blog posts

    // (!) deleting start from here
    $container.isotope({ 
        itemSelector : '.item', 
        layoutMode : 'masonry',
        masonry: {
                isFitWidth: true,
             columnWidth: 60,
            gutter: 10

        }
    });
    // (!) deleting end of here

    //Add the class selected to the item that is clicked, and remove from the others
    var $optionSets = $('#filters'),
    $optionLinks = $optionSets.find('a');

    if("onhashchange" in window) {
    // ... continue

Answer 3

我知道这不能回答你的问题，但是 - 如果你删除你发布的原始js小提琴上的所有css并改变同位素实例化以移除砌体，而不是使用fitRows，那么就没有跳跃。

$container.isotope({ 
    itemSelector : '.item', 
    layoutMode : 'fitRows'
});

这可能意味着您正在使用的CSS和砌体设置的组合不能很好地协同工作。

很难读懂正在发生的事情，因为有很多额外的html和css，并且javascript的缩进不一致。 如果你清理它并仅发布过滤所必需的部件，我可以更好看。