javascript/jquery를 사용하여 CSS 애니메이션 지연/클릭을 지연시키는 방법은 무엇입니까?

Question

그래서 질문이 있습니다. Javascript/JQuery를 통해 CSS 애니메이션을 시작하려고합니다. 애니메이션은 내 탐색 메뉴입니다. div에 놓인 너비가 0으로 설정된 4 개의 링크로 구성됩니다. 애니메이션은 상위 요소의 너비의 100 %를 지연에서 + 100ms로 만듭니다 (상단 요소에서 하단 요소까지 300에서 시작하여 모두가 개별적으로 메뉴를 형성하는 것처럼 보입니다). 또한 클릭시 애니메이션을 뒤집는 방법도 좋습니다. 나는 toggle()을 사용했지만 실패했다.

<div class="navbar"> 
    <a href="index.php"><div id="nav1">Home</div></a> 
    <a href="about.php"><div id="nav2">About</div></a> 
    <a href="work.php"><div id="nav3">Work</div></a> 
    <a href="contact.php"><div id="nav4">Msg</div></a> 
</div> 

다음은 자바 스크립트 코드

function expand() { 
    var navName = '#nav'; 
    var delay = 0; 
    for(i = 1; i < 5; i++){ 
    //Resets nav value 
    navName = '#nav'; 
    delay = 200 
    //Adds number to class name 
    navName += i; 
    delay += 100; 
    //alert(navName + delay); 
    $(navName).css('animation', 'expand ease 500ms forwards'); 
    $(navName).css('animation-delay', delay +'ms'); 

}

Answer 1

오히려 JQuery와 사용 animation 속성을 적용하는 대신,이 클래스를 전환하여 적용 할 수 있습니다. 이 클래스에는 이미 필요한 애니메이션 속성이 포함됩니다.

$('.target').on('click', function() { 
 
    $(this).toggleClass('animate'); 
 
});

.target { 
 
    padding: 1em; 
 

 
    background: cornflowerblue; 
 
} 
 

 
.animate { 
 
    animation: expand 1s linear; 
 
    animation-delay: 200ms; 
 
} 
 

 
@keyframes expand { 
 
    0% { 
 
     transform: scale(1); 
 
     opacity: 0; 
 
    } 
 
    60% { 
 
     transform: scale(2); 
 
     opacity: 1; 
 
    } 
 
    100% { 
 
     transform: scale(1.5); 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="target">click me</div>

이 발생하는 어떤 문제