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