JavaScript détermine la fin de l'animation CSS3. Fonction de rappel pour les compétences end_javascript d'animation CSS3.

A l'ère du CSS3, tout est possible avec CSS3--animation

Les js traditionnels peuvent déterminer si l'animation se termine via la fonction de rappel ; même si la technologie CSS est utilisée pour générer des effets d'animation, JavaScript peut toujours capturer l'événement de fin de l'animation ou de la transformation

 ;

L'événement transitionend et l'événement animationend sont des événements de navigateur standard, mais dans les navigateurs WebKit, vous devez toujours utiliser le préfixe webkit, nous devons donc détecter les événements séparément en fonction des différents navigateurs

Copier le code Le code est le suivant :

var transitions = {
        'transition':'transitionend',
        'OTransition':'oTransitionEnd',
        'MozTransition':'transitionend',
        'WebkitTransition':'webkitTransitionEnd'
>

Le code source est joint ci-dessous :

Copier le code Le code est le suivant :

La fonction de rappel se déclenche une fois l'animation ou la transformation terminée. La prise en charge des grandes bibliothèques de classes n’est plus requise.

la transition d'animation CSS3 est lentement masquée (durée de transition : 3 s;)

<script>                                                                      (fonction() {<br> var e = document.getElementsByClassName('sample')[0];<br> fonction whichTransitionEvent(){<br> var t;<br>       var el = document.createElement('fakeelement');<br>       var transitions = {<br>           'transition':'transitionend',<br>          'OTransition':'oTransitionEnd',<br>           'MozTransition':'transitionend',<br>           'WebkitTransition':'webkitTransitionEnd'<br> ><br> pour(t dans les transitions){<br> Si( el.style[t] !== non défini ){<br>                  retourner les transitions[t];<br>            }<br> ><br> ><br> var transitionEvent = whichTransitionEvent();<br> transitionEvent && e.addEventListener(transitionEvent, function() {<br> alert('le mouvement CSS3 est terminé ! Je suis une fonction de rappel et n'utilise pas de bibliothèque tierce !');<br> });<br> StartFade = fonction() {<br> e.className = 'masquer';<br> ><br> })();<br></script>

Ce qui précède est la méthode pour juger de la fin de l'animation CSS3 avec javascript décrite dans cet article. J'espère que vous l'aimerez

.