同位素项目正在跳跃

Question

我正在创建一个使用wordpress和同位素的投资组合网站。由于某种原因，每次同位素项目被分类后，它们都会跳一跳。下面是一个演示这个问题的小提琴手：

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

我已经解决了我的问题，简单地删除了转换转换，我添加到同位素项目。我也把“！重要”从过渡中删除了。我添加的跃迁(悬浮跃迁)现在似乎与同位素添加的跃迁很好地配合。

旧的非工作代码：

.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;
}

为了帮助我更容易地解决这个问题，我制作了一部精简单单的小提琴。固定线路是第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的缩进不一致。如果你把它清理干净，只发布过滤所必需的部分，我可以看得更好。