Question

全晚候

我遇到了同位素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

Masonry / Isotope Jquery插件过滤器

1 个答案: