javascript - 禁用 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')
});