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

此功能已内置于Isotope v1.4中。见Metafizzy blog: Isotope v1.4 - refined inserting animation

同位素动画插入容器的左上角

2 个答案: