添加動畫？

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