禁用 css/javascript 动画（转换： translate3d）答案

【问题标题】：disable css/javascript animation (transform: translate3d)禁用 css/javascript 动画（转换： translate3d）
【发布时间】：2015-01-25 00:31:36
【问题描述】：

当我的帖子网格加载时，帖子加载在零位。然后 translate3d/width 抓取它们的值，它们会去正确的地方：http://www.marianoshoes.com/the-journal/

如何使用 css 禁用这个奇怪的 javascript/css 动画？

谢谢！

【问题讨论】：

【解决方案1】：

在我看来，它没有做任何动画，只是序列刚刚结束，就像在项目已经在屏幕上绘制之后添加 CSS。

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

否则，您可以通过确保您的 CSS 将成为首先加载到页面中的内容之一来更改此设置，并确保您的 JS 仅在文档完全加载后才运行。

【讨论】：

【解决方案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')
});

【讨论】：