Как включить анимацию Masonry непосредственно при загрузке страницы

На главной странице библиотеки masonry эффект кладки отображается непосредственно при загрузке страницы. Помимо заголовка «Что такое масонство?» представляют собой фрагменты изображений, отображаемые один за другим с красивым эффектом затухания.

Однако запуск всех примеров в репозитории github не приводит к анимации при загрузке страницы.

Как это заархивировать?

Что я сделал:

  • я клонировал репозиторий.
  • я запускал "npm install", "bower install", "grunt"
  • я открывал файлы примеров в папке "песочница", один за другим.

В консоли браузера не отображаются сообщения об ошибках. Видимо кладка работает. Я могу быть уверен, потому что изменения, например, в. конфигурация вступит в силу.

Но эффект на загрузку страницы сильно отличается от этого на домашней странице вендора. Анимаций нет.


person delete    schedule 26.10.2015    source источник
comment
Я не верю, что эти первоначальные анимации элементов кладки контролируются самой кладкой. Я думаю, вам нужно будет применить анимацию самостоятельно при загрузке страницы. Или при каждой загрузке элемента в макете каменной кладки.   -  person An0nC0d3r    schedule 26.10.2015
comment
Взгляните на daneden.github.io/animate.css.   -  person An0nC0d3r    schedule 26.10.2015


Ответы (1)


Это очень поздний ответ на исходный вопрос, но я был в тупике по той же проблеме. Хитрость заключается в том, чтобы запустить Masonry без элементов сетки или элементов, имеющих visibility: hidden. Использование параметра конфигурации Masonry stagger еще больше улучшит эффект. После инициализации добавьте элементы сетки или сделайте их видимыми, и каждый из них должен появиться с эффектом масштабирования. Вот пример, который я изменил на основе одного из примеров Дэвида ДеСандро.

person Damian Moore    schedule 17.02.2020