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

我最终采取了修改插件本身的路线（通过删除transform:"scale(0.001)"和transform:"scale(1)"），因为覆盖hiddenStyle和visibleStyle对象并不起作用（正如Isotope文档所建议的那样{ {3}}）。

希望有所帮助！看起来像是插件中的一个错误。

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

使用CSS过渡的同位素过滤 - 仅淡出

3 个答案: