为查询同位素过滤添加动画

Question

我试图了解同位素是如何工作的。目前已完成过滤功能，但我如何对项目进行动画处理？我阅读了手册并使用jquery引擎为动画提供动力，但说实话，我不确定从哪里开始。

http://fiddle.jshell.net/7t8mgont/9/

var t = e("#filters");
t.imagesLoaded(function() {
    t.isotope({
        itemSelector: ".people-card",
        filter: "*",
        resizable: false,
        animationEngine: "jquery"
    })
});

以上是我尝试过的。我对我将如何实现这一目标感到非常困惑。只是一个标准的褪色/移动。

Answer 1

这是一个 jsFiddle

您省略了 v1.5 的 CSS（v2 不需要这个动画）。在您的情况下，css 是：

 /**** Isotope Filtering ****/
.people-card {
  z-index: 2;
 }
.isotope-hidden.people-card {
pointer-events: none;
z-index: 1;
}
/**** Isotope CSS3 transitions ****/
.people-cards-container,
.people-cards-container .people-card {
 -webkit-transition-duration: 0.8s;
 -moz-transition-duration: 0.8s;
  -ms-transition-duration: 0.8s;
   -o-transition-duration: 0.8s;
      transition-duration: 0.8s;
}
.people-cards-container {
 -webkit-transition-property: height, width;
 -moz-transition-property: height, width;
  -ms-transition-property: height, width;
   -o-transition-property: height, width;
      transition-property: height, width;
}
.people-cards-container .people-card {
 -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;
}