отключить анимацию css/javascript (transform: translate3d)

Question

Когда моя сетка сообщений загружается, сообщения загружаются в нулевое положение. Затем translate3d/width захватывают их значения, и они идут в нужное место: http://www.marianoshoes.com/the-journal/

Как отключить эту странную анимацию javascript/css, используя css?

Спасибо!

Answer 1

Мне кажется, что он не делает анимации, но последовательность просто выключена, как CSS добавляется после того, как элементы уже нарисованы на экране.

Если вы добавляете классы CSS к элементам с помощью JS, вы можете исправить это, по умолчанию свойство display равно none, и, наконец, измените его на блокировку (это заставит его немного подольше, чтобы отобразить информация, но, по крайней мере, она находится в правильном формате.

Иначе вы можете изменить это, убедившись, что ваш CSS станет одной из первых вещей, которые нужно загрузить на страницу, и убедитесь, что ваш JS получает только запуск после того, как документ полностью загружен.

Answer 2

Вы не можете остановить js от перемещения блоков в нужное место, но вы можете затухать в элемент после вашего j s.

Ваш CSS:

.post-grid { 
    opacity: 0; 
    transition: opacity 0.5s; 
} 
.post-grid.loaded { 
    opacity: 1; 
} 

Ваших ЯШИ:

$(document).ready(function() { 
    var $postGrid = $('.post-grid'); 
    .... do stuff to post grid 

    $postGrid.addClass('loaded') 
});