Création d'une animation sur un déclencheur d'événement avec Javascript et CSS

Question

Je suis nouveau dans l'utilisation de javascript et CSS et j'essaie actuellement de faire une petite animation qui est déclenchée à l'appel d'événement. L'animation est simple, et ne fait que changer la transparence d'une image. Mon problème est que l'animation ne fonctionne qu'une fois sur deux lorsque la fonction est appelée.

Une fonction appelée "pulse()" est appelée chaque fois que je veux que l'animation se produise.

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

Le CSS ressemble à ceci :

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

L'image sur laquelle l'animation est réalisée se fait comme suit ;

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

Comment puis-je modifier le code pour que l'animation se produise chaque fois que la fonction pulse() est appelée ?

Answer 1

Vous pouvez ajouter un gestionnaire d'événement pour gérer la fin de l'animation afin de supprimer la classe. Pour les besoins de l'exemple, j'ai remplacé l'image par un div rouge.

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>