로드시 애니메이션 요소를 숨기는 방법은 무엇입니까?

Question

내 방문 페이지에 animate.css과 waypoints.js을 사용하고 있습니다. 사용자가 페이지를 스크롤 할 때 요소에 애니메이션을 적용하려고합니다. 하지만, 문제는 애니메이션을 시작하기 전에 요소를 숨겨야한다는 것입니다 (애니메이션을 숨기지 않으면 animate.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> 

나는, 각 요소에 애니메이션 지연을 추가 할 수 있도록 그들이 animation-delay 속성을 사용하여 각 요소에 지정된 시간 (초) 서로 후 fadeInUp. 나는 이것을 작동시킬 수 없다. 애니메이션 딜레이를 사용하지 않고 다음 코드를 시도했지만 성공하지 못했습니다.

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

내 접근 방식이 완전히 잘못되었다는 사실을 알려주십시오. 그렇다면 달성 할 수있는 더 나은 방법을 제공 할 수 있습니까?

Answer 1

CSS만으로 할 수 있습니다.

제목을 애니메이션으로 만들려고한다고 가정 해 봅시다. 는 웨이 포인트가 애니메이션 당 .animated을 추가합니다 볼 안타

.animated { visibility: visible !important; } 

이 CSS를합니다 (animate.css에서 유래) 애니메이션 클래스를

.title { visibility: hidden; } 

및 제공 : 당신의 요소의 클래스이 CSS주세요 .css의 코드를 입력하면 애니메이션에 표시됩니다. 스택 클래스에 의해 !important를 사용

Answer 2

피가 :

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

Answer 3

당신은 혼탁이 작업을 수행 할 수 있습니다. 영향을 줄 div 요소에 빈 클래스를 추가하십시오. jquery가 중간 지점이있는 애니메이션 클래스를 첨부하면 불투명도가있는 애니메이션 클래스를 다시 가져올 수 있습니다. 1.

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

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