Animation 从容器左上角为插入设置动画

对于我的同位素容器，每当我在容器中插入新项目时。。。它最初出现在容器的左上角（因此位于第一个项目的位置），然后根据排序向下移动到应该放置的位置，从而设置动画

下面是我希望发生的一个例子：。正如您在该示例中看到的，新项从它将在容器中占据的位置开始放大

我还没有能够在JSFIDLE上复制我在本地看到的问题，但是我想有人可能会有一个初步的建议，或者告诉我在我的JSFIDLE示例中，是什么使insert具有良好的放大功能。这只是违约吗？与CSS相关的东西

---

另外，不确定这是否相关，但我的同位素实例或所有JPG的容器项都与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;
}

---

此功能已内置于同位素v1.4中。请参见

Quick tip：当您将一段代码复制到问题中时，每行至少缩进四个空格，这样可以使代码块更具可读性。另外，对于内联代码，请将代码段用倒勾（`）括起来。