jquery-isotope - 使用 CSS 过渡进行同位素过滤 - 仅淡入淡出

Question

当使用同位素过滤时，我正在尝试停用项目高度和宽度的 css 转换。所以，只是让项目淡出或淡入，然后移动 - 没有缩放。

我已经尝试了对标准 css 过渡的各种 css 修改：http: //isotope.metafizzy.co/docs/animating.html#css_transitions，但没有成功。

这可以在不修改插件的情况下实现吗？

这是我目前所拥有的演示：http: //codepen.io/2kp/pen/nAGkp

Answer 1

$('#container').isotope({
      hiddenStyle: {
        opacity: 0
      },
      visibleStyle: {
        opacity: 1
      }
})

Answer 2

由于覆盖 hiddenStyle 和 visibleStyle 对象不起作用（正如同位素文档http://isotope.metafizzy.co/options.html#visiblestyle所建议的） ，我最终采取了修改插件本身的路线（通过删除transform:"scale(0.001)"and ） .transform:"scale(1)"

希望有帮助！似乎是插件中的一个错误。

Answer 3

只是尝试做一些类似的事情，只为不透明度+高度设置动画，而不是宽度，并在我的路上思考我找到了一个适合你的解决方案 - 至少我希望如此！

只需将其添加到您的 JS 中：

$('#container').isotope({
    // options...
    transformsEnabled: false
});

并将 CSS 更改为：

.isotope .isotope-item {
  -webkit-transition-property: top, left, opacity;
     -moz-transition-property: top, left, opacity;
      -ms-transition-property: top, left, opacity;
       -o-transition-property: top, left, opacity;
          transition-property: top, left, opacity;
}