Question

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

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

我正在使用副本＆amp;运行代码来自Isotope演示的粘贴代码（虽然稍微修改了类名），但仍然没有乐趣。请参阅下面的代码段：

$(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;
    });

});

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

谢谢！

Answer 1

而不是针对您的css中的转换定位.isotope，而是定位一个新类 - 例如.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)

然后在同位素的onLayout回调中添加新类

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

停止Isotope在页面加载时运行初始动画

1 个答案: