尝试通过 jQuery Isotope 使用 CSS 过渡时出现问题

Question

我复制了 Isotope:http://isotope.metafizzy.co/demos/fluid-responsive.html 的流体/响应模式，但添加了使用“transition:width 0.3s”为点击元素的宽度设置动画。这确实有效，但是它禁用了我在“transitionend”上触发的“reLayout”动画。

我认为其中一个正在覆盖/与另一个冲突。有没有人有类似的问题或知道解决这个问题的方法？我尝试设置 'animationEngine : 'jquery'，这确实解决了问题，但看起来很糟糕 - 浏览器重新绘制问题！？

感谢您的帮助！

这是一个现场演示......

http://www.voyced.com/isotope-test/

如果您在开发者工具中禁用 css 属性“transition: width 0.3s”，“reLayout”动画会再次起作用。

Answer 1

为项目设置动画后发出$(window).resize()。

或

$container.isotope('reLayout', function() {
   $(window).resize();
 });