jquery - jQuery Isotope - 防止 Isotope 进行初始转换

Question

我正在使用带有 css 的同位素，例如

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

这使我的布局即使进入初始状态也会进行 0.8 转换。我希望它最初不要过渡，但在调整大小或添加项目时保持 0.8 秒的过渡

Answer 1

.isotope通过最初将选项设置containerClass为空字符串，然后.isotope在初始布局发生后将类设置在容器上，避免最初将类应用于容器。

var containerClassSet = false,
    $container = $('#container');
$container.isotope({
    containerClass: '',
    onLayout:       function ($elems, instance) {
        if (!containerClassSet) {
            containerClassSet = true;
            setTimeout(function () {
                $container.addClass('isotope');
            }, 0);
        }
    }
});

确保您的类带有前缀.isotope：

.isotope .isotope-item {
    ...
}

Answer 2

你为什么不在媒体屏幕中说唱过渡，例如，如果你的同位素容器是 980 像素；

@media screen and (min-width: 0px) and (max-width: 981px) {
  -webkit-transition-duration: 0.8s;
  -moz-transition-duration: 0.8s;
  -ms-transition-duration: 0.8s;
  -o-transition-duration: 0.8s;
  transition-duration: 0.8s;
}

过渡只会发生在 0-980px 之间