javascript - css/javascript アニメーションを無効にする (transform: translate3d)

Question

投稿のグリッドが読み込まれると、投稿はゼロの位置に読み込まれます。次に、translate3d/width で値を取得すると、適切な場所に移動します: http://www.marianoshoes.com/the-journal/

css を使用して、この奇妙な javascript/css アニメーションを無効にするにはどうすればよいですか?

ありがとう！

Answer 1

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

Answer 2

アニメーションは行われませんが、項目が既に画面に描画された後に CSS が追加されるように、シーケンスがオフになっているように思えます。

JS を使用して要素に CSS クラスを追加している場合は、display プロパティをデフォルトで none にすることでこれを修正し、最後に block に変更できます (これにより、情報を表示するのに少し時間がかかりますが、少なくとも正しい形式です。

それ以外の場合は、CSS がページに読み込まれる最初のものの 1 つになることを確認し、ドキュメントが完全に読み込まれた後にのみ JS が実行されるようにすることで、これを変更できます。