砌体/同位素 Jquery 插件过滤器

Question

晚安

我在使用 isotope jquery 插件 - 过滤时遇到问题。

我在这里创建了一个示例页面

http://www.csr500.co.uk/websites/v9/preview.html

现在我的问题是当我使用页面右上角的按钮进行过滤时，过滤工作，但是我希望未选中的项目/元素淡出，然后页面自行排序，即选择的项目自己重新排序，目前他们只是跳到位，我不喜欢。

经过一些研究，它似乎与 .masonry('reload') 有关，但我无法确定该代码的放置位置。

我的同位素代码位于页面底部。

提前感谢大家，我敢肯定是我有点昏头了。

干杯

卡梅隆

Answer 1

将这些 CSS 规则添加到您的样式表文件中：

.isotope,
.isotope .isotope-item {
  /* change duration value to whatever you like */
  -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 {
  -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 .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;
}

/**** disabling Isotope CSS3 transitions ****/

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

欲了解更多信息，请阅读此处：http://isotope.metafizzy.co/docs/animating.html