javascript - 如何在点击时触发第二个动画

Question

我有一堆在页面加载时下拉的 90x900 图像。动画只是添加到父元素中，选择列表中的所有 li，即图像。图像的初始位置是-1000px，并且有一个CSS动画在Y轴上从0px变换到1000px，并且它们停留在那里动画填充模式:向前。

我想要这样，当我单击按钮时，它们会返回到 -1000px 的初始位置。

这些是我的动画，第一个是初始页面加载动画，第二个是我想在点击时触发的动画。

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

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

因此，我将页面加载动画添加到 .main-pic li 中，以便将其添加到 ul 中的每个 li 中。然后我在每个 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 属性定义一个单独的类；动画 top 而不是 transform；在 .main-pic-toggle-leave

处将 animation-fill-mode 设置为 both

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