Comment puis-je contrôler avec précision l'achèvement de l'animation CSS3 et supprimer un élément après l'image finale ?

Contrôle de l'achèvement des animations CSS3

Dans le domaine du développement Web, les animations CSS3 sont devenues un outil puissant pour améliorer l'expérience utilisateur. Par conséquent, lors de la conception d'animations qui nécessitent un contrôle précis sur leurs états finaux, les arrêter sur leur dernière image peut poser un défi.

Cet article aborde un tel scénario, dans lequel une animation CSS3 en plusieurs parties est jouée au clic, avec la partie finale destinée à supprimer un div de l'écran. Malheureusement, l'animation revient continuellement à son état d'origine. Pour résoudre ce problème, nous explorons deux solutions :

1. Geler l'animation sur la dernière image :

Pour figer l'animation sur sa dernière image (achèvement à 100%), nous utilisons la propriété CSS animation-fill-mode: forwards; . Cette directive demande au navigateur de conserver l'état final de l'animation même après la fin de l'animation.

2. Suppression du Div après l'animation :

Alternativement, si la suppression complète du div est souhaitée, nous pouvons utiliser JavaScript pour supprimer l'élément du DOM après la lecture de l'animation. Ceci peut être réalisé avec la séquence suivante :

document.getElementById("myDiv").addEventListener("animationend", function() {
  this.parentNode.removeChild(this);
});

Une fois l'animation terminée, l'événement "animationend" est déclenché, provoquant la suppression du div de la page.

Exemple :

@keyframes colorchange {
  0%   { transform: scale(1.0) rotate(0deg); }
  50%  { transform: rotate(340deg) translate(-300px,0px) }
  100% { transform: scale(0.5) rotate(5deg) translate(1140px,-137px); }
}

#myDiv {
  animation: colorchange 1s infinite;
  animation-fill-mode: forwards;
}

Dans cet exemple, le div avec l'ID "myDiv" subit une animation qui se termine par une échelle et transformation de rotation. En définissant "animation-fill-mode: forwards;", l'état final est conservé après la fin de l'animation.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!