How can I trigger a second animation on click

Question

I have a bunch of these 90x900 images that drop down on page load. The animation for that is just added in the parent element selecting all li's in the list, which are the images. The images initial position is -1000px, and have a css animation to transform from 0px to 1000px on the Y Axis, and they stay there with animation-fill-mode: forwards .

I want it so when I click a button they return to their initial position of -1000px.

These are my animations, first one is the initial page load animation, second one is what I want to trigger on click.

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

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

So I added the page load animation to .main-pic li so it adds it to every li in the ul . And then I set an animation-delay of 0.2s more than the last one on every 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;
}

So I thought I could just add another class with an animation on it with jQuery. I made this class:

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

So I tried a couple different things with jQuery. I thought maybe if I removed the pre exisiting class with the initial animation on it, and then had a toggleClass on it, that it would work. But it does not.

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

Not sure what else I can do. Any ideas?

Answer 1

instead of animation, you can use transition. Then you can toggle some class on click and specify the 'after transition' state in this class

 $("#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> 

Answer 2

Define a separate class for animation properties for .main-pic li elements at css ; animate top instead of transform ; set animation-fill-mode to both at .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>