클릭시 두 번째 애니메이션을 트리거하는 방법

Question

페이지로드시 이러한 90x900 이미지가 여러 장 나타납니다. 그 애니메이션은 목록에있는 모든 li을 선택하는 부모 요소에 추가됩니다. 이는 이미지입니다. 이미지의 초기 위치는 -1000px이고 Y 축에서 0px에서 1000px로 변환 할 수있는 CSS 애니메이션이 있으며 여기에 animation-fill-mode: forwards으로 유지됩니다.

버튼을 클릭하면 -1000px의 초기 위치로 돌아갑니다.

이것은 내 애니메이션입니다. 첫 번째 애니메이션은 초기 페이지로드 애니메이션이고 두 번째 애니메이션은 클릭시 트리거하려고합니다.

@keyframes mainpic { 
from {transform: translateY(0px);} 
to {transform: translateY(1000px);} 
} 

@keyframes mainpicleave { 
    from {transform: translateY(1000px);} 
    to {transform: translateY(0px);} 
} 

그래서 나는 그렇게는 ul의 모든 li에 추가 .main-pic li에 페이지로드 애니메이션을 추가했다. 그리고 animation-delay을 매번 에 마지막 것보다 0.2 초 더 설정합니다.

.main-pic li { 
    float: left; 
    margin-left: 7px; 
    z-index: -1; 
    position: relative; 
    top: -1000px; 
    box-shadow: 3px 0px 10px black; 
    animation-name: mainpic; 
    animation-fill-mode: forwards; 
    animation-duration: 3s; 
} 

.main-pic-01 { 
    background-image: url('../images/dropdown-main/main-pic-01.png'); 
    height: 900px; 
    width: 90px; 
    animation-delay: 0.2s; 
} 

.main-pic-02 { 
    background-image: url('../images/dropdown-main/main-pic-02.png'); 
    height: 900px; 
    width: 90px; 
    animation-delay: 0.4s; 
} 

그래서 저는 다른 클래스에 jQuery가있는 애니메이션을 추가 할 수 있다고 생각했습니다. 나는이 수업을 만들었다 :

.main-pic-toggle-leave { 
    animation-name: mainpicleave; 
    animation-duration: 2s; 
    animation-fill-mode: forwards; 
} 

그래서 나는 jQuery와 몇 가지 다른 것들을 시도했다. 초기 애니메이션이있는 기존 클래스를 제거한 다음 toggleClass을 사용하면 효과가 있다고 생각했습니다. 그러나 그렇지 않습니다.

$('#btn_01').click(function(){ 
    $('.main-pic-01').toggleClass('main-pic li'); 
    $('.main-pic-01').toggleClass('main-pic-toggle-leave'); 
}); 

내가 할 수있는 다른 방법이 확실하지 않습니다. 어떤 아이디어?

Answer 1

css에서 .main-pic li 요소 animation 속성에 대한 별도의 클래스를 정의; transform 대신 top을 애니메이트하십시오. 당신은`transition`을 사용할 수 있습니다, 대신 애니메이션의 .main-pic-toggle-leave

$('#btn_01').click(function() { 
 
    $(".main-pic-01").toggleClass('animation'); 
 
    $(".main-pic-01").toggleClass('main-pic-toggle-leave'); 
 
});

.main-pic li { 
 
    float: left; 
 
    margin-left: 7px; 
 
    z-index: -1; 
 
    position: relative; 
 
    box-shadow: 3px 0px 10px black; 
 
    top: -1000px; 
 
} 
 
.animation { 
 
    animation-name: mainpic; 
 
    animation-fill-mode: forwards; 
 
    animation-duration: 3s; 
 
} 
 
.main-pic-01 { 
 
    background-image: url("http://lorempixel.com/900/90/nature"); 
 
    background-repeat: no-repeat; 
 
    height: 900px; 
 
    width: 90px; 
 
    animation-delay: 0.2s; 
 
} 
 
.main-pic-02 { 
 
    background-image: url(); 
 
    height: 900px; 
 
    width: 90px; 
 
    animation-delay: 0.4s; 
 
} 
 
.main-pic-toggle-leave { 
 
    animation-name: mainpicleave; 
 
    animation-duration: 2s; 
 
    animation-fill-mode: both; 
 
} 
 

 
@keyframes mainpic { 
 
    from { 
 
    top: -1000px; 
 
    } 
 
    to { 
 
    top: 0px; 
 
    } 
 
} 
 
@keyframes mainpicleave { 
 
    from { 
 
    top: 0px; 
 
    } 
 
    to { 
 
    top: -1000px; 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button id="btn_01">click</button> 
 
<ul class="main-pic"> 
 
    <li class="main-pic-01 animation"></li> 
 
    <ul>

Answer 2

대신 애니메이션을 사용할 수 있습니다. 그럼 당신은 클릭에 대한 몇 가지 클래스를 전환하고이 클래스에서 '전환 후'상태를 지정할 수 있습니다

$("#trigger").on("click", function(e){ 
 
    e.preventDefault(); 
 
    $("#block").toggleClass("moved"); 
 
});//#button click 
 

 
$(window).on("load", function(){ 
 
    $("#trigger").trigger("click"); 
 
});//window load

#block 
 
{ 
 
    height: 100px; 
 
    width: 100px; 
 
    background: orange; 
 
    transition: transform 0.8s ease; 
 
    transform: translateX(0px); 
 
} 
 

 
#block.moved 
 
{ 
 
    transform: translateX(300px); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> 
 
<div id="block"></div> 
 

 
<button id="trigger">Move</button>