容器左上角的同位素動畫插入物

Question

對於我的同位素容器，每當我將新物品插入容器中時......它最初出現在容器的左上角（所以在第一個物品的位置）然後通過向下移動到應該去的地方進行動畫處理。

下面是我想要發生的一個例子：http://jsfiddle.net/aaairc/H4ZMV/5/。正如您在該示例中看到的那樣，新項目將從容器中要放置的位置開始放大。

我還沒有能夠複製我在jsfiddle本地看到的問題，但我想有人可能有一個最初的建議或指向我什麼在我的jsfiddle示例實際上是啓用插入有很好的放大功能。這只是默認？有關於CSS的東西？

另外，不知道這是否相關，但我的同位素實例或所有jpgs的容器項目。

Answer 1

它必須與您如何指定CSS。當我將CSS更改爲此時，它的工作方式如預期的那樣。

/**** Isotope CSS3 transitions ****/ 

.isotope, 
.isotope .isotope-item { 
    -webkit-transition-duration: 0.8s; 
    -moz-transition-duration: 0.8s; 
      transition-duration: 0.8s; 
} 

.isotope { 
    -webkit-transition-property: height, width; 
    -moz-transition-property: height, width; 
      transition-property: height, width; 
} 

.isotope .isotope-item { 
    -webkit-transition-property: -webkit-transform, opacity; 
    -moz-transition-property: -moz-transform, opacity; 
      transition-property:   transform, opacity; 
} 

/**** disabling Isotope CSS3 transitions ****/ 

.isotope.no-transition, 
.isotope.no-transition .isotope-item, 
.isotope .isotope-item.no-transition { 
    -webkit-transition-duration: 0s; 
    -moz-transition-duration: 0s; 
      transition-duration: 0s; 
} 

/* End: Recommended Isotope styles */ 

/* disable CSS transitions for containers with infinite scrolling*/ 
.isotope.infinite-scrolling { 
    -webkit-transition: none; 
    -moz-transition: none; 
      transition: none; 
} 

Answer 2

此功能已內置到同位素V1.4。請參閱Metafizzy blog: Isotope v1.4 - refined inserting animation