禁用css / javascript动画（transform：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')
});