Question

我希望在窗口调整大小时移除同位素项目上的过渡（以便项目不会为其位置或大小设置动画），但仍保持过滤/隐藏/显示时发生的缩放/不透明度/位置过渡项目

然而，使用以下代码：

$container.isotope({transitionDuration: 0});

删除窗口调整大小过渡和隐藏/显示过渡。

如何删除窗口调整大小过渡？

谢谢！

Answer 1

我可以保证有更好/更有效的方法来做到这一点，我欢迎任何建议，但这就是我过去的做法：

<强>初始化：

// No transitions
$('.grid').isotope({
  itemSelector: '.grid-item',
  transitionDuration: 0,
  isResizeBound: false
});

// Handle Resize
$(window).resize(function () {
  $('.grid').isotope('layout');
});

在过滤器/点击事件中：

// Add transition & filter 
$('.grid').isotope({
  transitionDuration: '0.4s',
  filter: selector
});

// Remove transition
$('.grid').isotope({
  transitionDuration: 0
});

关键是在过滤器之前为transitionDuration提供一个值，并在过滤器之后将其设置回0。你怎么做不应该有所作为。

Answer 2

首先，这是你的小提琴，

url：https://jsfiddle.net/eugensunic/so1axnup/18/

<强>第二

以下是为实现此目的而重要的两段代码：

属性isResizeBound: false,的值应为false（默认情况下为true），因此您的元素不再应用它们。

以下是官方文件对此的说法：

调整窗口大小时调整大小和位置。默认情况下启用 isResizeBound：true

另一段代码非常重要，以便在触发resize事件时元素 STILL 移动。

以下是一个例子：

  $(window).resize(function(){
    isotope.isotope('layout');
  });
});

一旦你开始调整你的窗口大小，由于这个代码，元素将开始重新定位自己（你将具有“即时自举效果”而不再有“同位素动画效果”）。

如果您决定不使用“窗口调整大小代码事件”，则不会进行元素重新定位（它将获得绝对定位项的效果）。

还有一件事，一定要使用V2 isotope js库。

url：https://cdnjs.cloudflare.com/ajax/libs/jquery.isotope/2.2.1/isotope.pkgd.min.js

编辑，因为我正在探索更多，还有这段代码可以让你获得效果

 percentPosition: true,
  masonry: {
          columnWidth: '.grid-sizer'
        }

请参阅codepen示例：http://codepen.io/desandro/pen/mIkhq

正如我所看到的，这里还有更多，但玩这三件事肯定会让你到达你想要的地方。

删除窗口调整大小的项目转换，但保持转换以过滤/显示/隐藏项目

2 个答案: