禁用 CSS/JavaScript 动画(转换:Translate3D）

disable css/javascript animation (transform: translate3d)

本文关键字：转换 Translate3D 动画 CSS JavaScript 禁用      更新时间：2023-09-26

当我的帖子网格加载时，帖子加载到零位置。然后翻译3d/width抓取他们的值，他们去正确的地方：http://www.marianoshoes.com/the-journal/

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

谢谢！

在我看来

，它不做任何动画，但序列只是关闭的，就像在屏幕上绘制项目后添加 CSS 一样。

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

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

你不能阻止 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')
});
相关文章：