Ich bin neu in der Verwendung von Javascript und CSS und versuche derzeit, eine kleine Animation zu erstellen, die beim Ereignisaufruf ausgelöst wird. Die Animation ist einfach und ändert nur die Transparenz eines Bildes. Mein Problem ist, dass die Animation nur jedes Mal funktioniert, wenn die Funktion aufgerufen wird.
Eine Funktion namens "puls ()" wird jedes Mal aufgerufen, wenn die Animation ausgeführt werden soll.
<script>
function pulse() {
$('.transform').toggleClass('transform-active');
}
</script>
Das CSS sieht folgendermaßen aus:
.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;
}
}
Das Bild, auf dem die Animation ausgeführt wird, wird folgendermaßen erstellt.
<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>
Wie kann ich den Code so ändern, dass die Animation jedes Mal ausgeführt wird, wenn der Funktionsimpuls () aufgerufen wird?
Sie können einen Ereignishandler hinzufügen, der behandelt wird, wenn die Animation endet, um die Klasse zu entfernen. Für das Beispiel habe ich das Bild in ein rotes Div geändert
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>Dieser Artikel stammt aus dem Internet. Bitte geben Sie beim Nachdruck die Quelle an.
Bei Verstößen wenden Sie sich bitte [email protected] Löschen.
Lass mich ein paar Worte sagen