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

添加动画到jquery同位素过滤？

1 个答案: