禁用CSS / JavaScript动画（转换：translate3d）

Question

当我的柱子网格加载时，柱子在零位置加载。 然后，translate3d / width抓住它们的值，然后将它们移到正确的位置： http : //www.marianoshoes.com/the-journal/

如何使用CSS禁用此怪异的javascript / css动画？

谢谢！

Answer 1

在我看来，它不执行任何动画处理，但是序列只是关闭了，就像在屏幕上绘制完项目后添加CSS一样。

如果使用JS将CSS类添加到元素中，则可以通过将display属性默认设置为none来解决此问题，最后将其更改为block（这将花费更长的时间来显示信息，但是在至少它的格式正确。

另外，您可以通过确保CSS将成为要加载到页面中的第一件事来更改此设置，并确保仅在文档完全加载后才运行JS。

Answer 2

您不能阻止js将块移动到正确的位置，但是可以在 js之后淡入元素。

您的CSS：

.post-grid {
  opacity: 0;
  transition: opacity 0.5s;
}
.post-grid.loaded {
  opacity: 1;
}

您的js：

$(document).ready(function() {
   var $postGrid = $('.post-grid');
   .... do stuff to post grid

   $postGrid.addClass('loaded')
});