javascript - 使用 Javascript 和 CSS 在事件触发时制作动画

Question

我是 javascript 和 CSS 的新手，目前正在尝试制作一个在事件调用时触发的小动画。动画很简单，仅改变图像的透明度。我的问题是动画仅在每隔调用该函数时才起作用。

每次我希望动画发生时，都会调用一个名为“pulse()”的函数。

 <script>
    function pulse() {
      $('.transform').toggleClass('transform-active');
    }
 </script>

CSS 看起来像这样:

.lock-image {

}

.transform {
  -webkit-transition: all 1s ease-in-out;  
  -moz-transition: all 1s ease-in-out;  
  -o-transition: all 1s ease-in-out;  
  -ms-transition: all 1s ease-in-out;  
  transition: all 1s ease-in-out;
}

.transform-active {
  /*animation-delay: 2s;*/
  animation-iteration-count: 1;
  animation: pulse 0.5s;
  animation-direction: alternate;
}


@keyframes pulse {
  0% {
    opacity: 1;
  }
  50%{
    opacity: 0.3;
  }
  100% {
    opacity: 1;
  }
}

完成动画的图像是这样完成的；

  <div class="lock-image transform">
    <img id="myImage" src="pic_locked.png" class="img-responsive " style="display:inline" alt="Lock" width="100" height="80">
  </div>

如何更改代码，以便每次调用函数pulse() 时都会发生动画？

Answer 1

您可以添加一个事件处理程序来处理动画结束时删除该类的情况。为了示例的目的，我将图像更改为红色 div

function pulse() {
  $('.transform').addClass('transform-active');
}

$('.transform').on('webkitAnimationEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function() {
  $(this).removeClass('transform-active');
})

#myImage {
  display: block;
  background-color: red;
  width: 100px;
  height: 80px;
}

.transform {
  -webkit-transition: all 1s ease-in-out;
  -moz-transition: all 1s ease-in-out;
  -o-transition: all 1s ease-in-out;
  -ms-transition: all 1s ease-in-out;
  transition: all 1s ease-in-out;
}

.transform-active {
  /*animation-delay: 2s;*/
  animation-iteration-count: 1;
  animation: pulse 0.5s;
  animation-direction: alternate;
}

@keyframes pulse {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.3;
  }
  100% {
    opacity: 1;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="lock-image transform">
  <div id="myImage"></div>
</div>
<br/>
<button type="button" onclick="pulse()">Pulse</button>