1

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

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

我正在使用 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;
    });

});

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

谢谢！！

4

1 回答 1

2

而不是针对.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)

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

onLayout: function() {
   $('.isotope').addClass('isotope-ready');
}
于 2013-12-12T14:37:39.793 回答