0

晚上所有

我遇到了同位素 jquery 插件的问题 - 过滤。

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

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

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

进行了一些研究后，它似乎与 .masonry('reload') 有关，但是我无法弄清楚该代码的放置位置。

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

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

干杯

卡梅伦

4

1 回答 1

0

将这些 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

于 2013-05-09T21:17:04.900 回答