Lors de l'utilisation de @keyframes pour fondu avec opacité, comment répéter l'animation avec l'événement?

Question

Je crée une étiquette pour l'utilisateur, si l'utilisateur essaie de faire glisser et déposer un élément qui a déjà été déplacé.

Le problème est, que les animations se produit seulement une fois, et à la fin de l'animation, il aura une opacité de 0 pour toujours.

CSS

@keyframes smooth { 
0% { opacity: 1;} 
100% { opacity: 0;} 
} 

.o_tip{ 
    position: absolute; 
    z-index: 999; 

    display: none; 
    opacity: 0; 

    -webkit-animation: smooth 2s ease-in; 
    -moz-animation: smooth 2s ease-in; 
    -o-animation: smooth 2s ease-in; 
    -ms-animation: smooth 2s ease-in; 
    animation: smooth 2s ease-in; 
} 

Pour illustrer mon problème, si je 'fin' sur l'animation opacity: 0.2 au lieu de opacity: 0:

@keyframes smooth { 
0% { opacity: 1;} 
100% { opacity: 0.2;} 
} 

... alors l'étiquette sera réapparut chaque événement - mais il ne disparaîtra pas à nouveau, ce que je veux faire.

Answer 1

Vous pouvez placer la règle d'animation dans une règle de classe css spécifique, puis cliquer à nouveau sur l'ajout de cette classe. Gardez ces points à l'esprit:

1. Vous devez d'abord supprimer la classe d'animation avant de la rajouter pour avoir un effet.
2. Même si vous suivez le premier point, supprimer la classe et l'ajouter à nouveau n'aura aucun effet visuel. Pour déclencher la refusion, vous pouvez utiliser cette instruction: void targetDiv.offsetWidth;.

document.querySelector("#start-animation").onclick = function(e){ 
 
    var targetDiv = document.querySelector("#mydiv"); 
 
    targetDiv.className = ""; 
 
    void targetDiv.offsetWidth; // this triggers UI reflow 
 
    targetDiv.classList.add("o_tip"); 
 
}//onclick

@keyframes smooth { 
 
0% { opacity: 1;} 
 
100% { opacity: 0;} 
 
} 
 

 
.o_tip{ 
 
    z-index: 999; 
 
    animation: smooth 2s ease-in forwards; 
 
} 
 

 
#mydiv{ 
 
    background-color: yellow; 
 
    height: 50px; 
 
    width: 100px; 
 
} 
 
#mydiv.o_top{ 
 
    display: block; 
 
}

<div id="mydiv"></div> 
 
<button id="start-animation">Start animation</button>