Как скрыть анимированные элементы при загрузке?

Я использую animate.css с waypoints.js на моей целевой странице. Я хочу анимировать элементы, когда пользователь прокручивает страницу. Но проблема в том, что мне нужно скрыть элементы до начала анимации (если я не скрываю, animate.css сначала скрывает элемент, а затем анимирует, что выглядит довольно уродливо).

Однако я решил проблему, добавив два класса в мой css, но это создает еще одну проблему.

.visible{ opacity: 1; }
.invisible {opacity: 0; }
// I added following jquery code 
$('elem').removeClass('invisible').addClass('visible fadeInUp');

Это работает хорошо, пока я не добавлю animation-delay к элементам. Вот объяснение, чего я хочу достичь. У меня есть такие элементы:

<ul>
 <li>element1</li>
 <li>element2</li>
 <li>element3</li>
</ul>

Я хочу добавить задержку анимации к каждому из элементов, так что они fadeInUp после друг друга с указанными секундами в каждом из элементов, используя свойство animation-delay. Я не могу заставить это работать. Я пробовал использовать код без использования задержки анимации, но не успел.

$('elem').each(function() {
  // code with delay using timeout
  setTimeout(function(){
   $(this).removeClass('invisible').addClass('...');
  }, 100);
});

Сообщите мне, если мой подход полностью не прав? Если да, то можете ли вы предоставить лучший способ выполнить.

Ответ 1

Вы можете сделать это только с CSS.

Скажем, вы пытаетесь анимировать заголовок. Дайте классу element этот css:

.title { visibility: hidden; }

и дайте анимированный класс (который происходит из animate.css) this css:

.animated { visibility: visible !important; }

Когда он попадает в представление путевых точек, он добавит .animated за код animate.css, а затем он будет виден для анимации.

Ответ 2

Избегайте использования !important путем укладки классов:

.hidden-load {visibility: hidden;}
.hidden-load.animated {visibility: visible;}

Ответ 3

Вы можете сделать это с непрозрачностью. Добавьте пустой класс в элементы div, которые вы хотите повлиять. Как только jquery присоединяет анимированный класс с путевыми точками, вы можете вернуть его к жизни с непрозрачностью: 1.

.to-be-animated {
  opacity: 0;
}

.to-be-animated.animated {
  opacity: 1;
}