添加动画？

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

你离开了CSS的V1.5（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; 
}