Question

我有一堆这些90x900图像在页面加载时下拉。它的动画刚刚添加到父元素中，选择列表中的所有li，即图像。图像初始位置是-1000px，并且在Y轴上有一个css动画从0px变换到1000px，它们保持在那里 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);}
}

所以我将页面加载动画添加到.main-pic li，因此它将其添加到li中的每个ul。然后我在animation-delay每li设置比最后一个{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; }。

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

所以我想我可以用jQuery添加另一个带动画的类。我做了这个课：

toggleClass

所以我用jQuery尝试了几个不同的东西。我想也许如果我删除了pre preisiting类并在其上添加了初始动画，然后在其上有一个$('#btn_01').click(function(){ $('.main-pic-01').toggleClass('main-pic li'); $('.main-pic-01').toggleClass('main-pic-toggle-leave'); });，那就可以了。但事实并非如此。

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $(".quantity").change(function(){
var amount =0;
       $('.quantity[value!=""]').each(function() {
    amount += this.value * 5;
  });
$('#amount').val(amount );
    });
});
</script>
</head>
<body>
<input type="text" id="amount"/>

          first:<input type="number" class="quantity"/>
          second:<input type="number" class="quantity"/> 

</body>
</html>

不确定我还能做些什么。有什么想法吗？

Answer 1

而不是动画，您可以使用过渡。然后，您可以在单击时切换某个类，并在此类中指定“转换后”状态

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

在animation处为.main-pic li元素的css属性定义单独的类;动画top代替transform;在animation-fill-mode

将both设置为.main-pic-toggle-leave

＆＃13;

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

＆＃13;

.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;
  }
}

＆＃13;

<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>

＆＃13;

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

2 个答案: