Как вызвать вторую анимацию при нажатии

Question

У меня есть куча этих 90х900 изображений, которые выпадают при загрузке страницы. Анимация для этого только добавляется в родительский элемент, выбирая все лики в списке, которые являются изображениями. Начальная позиция изображений - -1000px, а анимация css - для преобразования от 0px до 1000px на оси Y, и они остаются там с .

Я хочу, чтобы это было, когда я нажимаю кнопку, они возвращаются в исходное положение -1000 пикселей.

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

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

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

Поэтому я добавил анимацию загрузки страницы в .main-pic li так добавляет к каждому li в ul. И затем я установил animation-delay из 0.2s больше, чем последний на каждые li.

.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. Я подумал, может быть, если бы я удалил класс pre exisiting с начальной анимацией на нем, а затем на нем был toggleClass, что он сработает. Но это не так.

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

Не знаю, что еще я могу сделать. Есть идеи?

Answer 1

Определите отдельный класс для animation свойств .main-pic li элементов в css; анимировать top вместо transform; установить animation-fill-mode в both на .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>