停止同位素在页面加载时运行初始动画答案

【问题标题】：Stop Isotope running initial animation on page load停止同位素在页面加载时运行初始动画
【发布时间】：2013-09-15 08:29:16
【问题描述】：

尽管所有文档都说 Isotope 不应在页面加载时运行动画，但我的页面似乎每次都这样做。

它设置为使用 CSS 作为动画引擎，所以我看不到禁用它或在运行时更改持续时间的方法。

我正在使用 Isotope 演示中的复制和粘贴代码运行代码（尽管类名略有修改），但仍然没有乐趣。参见下面的代码 sn-p：

$(document).ready(function ()
{
    // Isotope Filtering
    var $container = $('#portfolioItems');
    $container.isotope({
        // options...
    });

    // filter items when filter link is clicked
    $('.filter_nav a').click(function ()
    {
        var selector = $(this).attr('data-filter');
        $container.isotope({ filter: selector });

        return false;
    });

});

实际过滤工作正常，只是想阻止初始动画。

谢谢！！

【问题讨论】：

它似乎总是从起始位置 (0,0) 到它们的静止位置进行初始动画。您是否尝试过将 animationOptions: Duration 最初设置为一个非常小的数字，以便立即发生？
@HiTechMagic - 这是个好主意，但我使用 CSS 过渡而不是 jQuery 来制作动画，所以我认为我无法更改它？抱歉应该在我的帖子中提到这一点。 :)
没关系。时间由它在项目上生成的 CSS 转换使用。只需最初更改它，然后在 isotope'sonLayout 事件中将其更改回来。

标签： jquery jquery-isotope

【解决方案1】：

不要将 .isotope 定位到 CSS 中的转换，而是定位一个新类 - 例如.isotope-ready

.isotope-ready, .isotope-ready .isotope-item {
    -webkit-transition-duration: 0.8s;
       -moz-transition-duration: 0.8s;
        -ms-transition-duration: 0.8s;
         -o-transition-duration: 0.8s;
            transition-duration: 0.8s;
}

.isotope-ready {
    -webkit-transition-property: height, width;
       -moz-transition-property: height, width;
        -ms-transition-property: height, width;
         -o-transition-property: height, width;
            transition-property: height, width;
}

.isotope-ready .isotope-item {
      -webkit-transition-property: -webkit-transform, opacity;
         -moz-transition-property:    -moz-transform, opacity;
          -ms-transition-property:     -ms-transform, opacity;
           -o-transition-property:      -o-transform, opacity;
              transition-property:         transform, opacity;
}

指南针版本如下：

.isotope-ready, .isotope-ready .isotope-item
    +transition-duration(.8s)
.isotope-ready
    +transition-property(height, width)
    .isotope-item
        +transition-property(transform, opacity)

然后在 isotope 的 onLayout 回调中添加你的新类

onLayout: function() {
   $('.isotope').addClass('isotope-ready');
}

【讨论】：