Comment mettre l'animation en pause au survol mais continuer une fois la souris partie

Question

J'en ai marre de plusieurs solutions et celle-ci est la plus proche que j'ai obtenue. Mais je ne suis toujours pas satisfait du résultat, car lorsque la souris quitte l'élément, l'élément revient à sa rotation d'origine. L'idée est que si vous survolez l'élément, cela déclenchera l'animation même si la souris quitte l'élément. Si vous survolez l'élément, il joue une animation et reste à 0 degré, et une fois la souris partie, une autre animation est jouée et revient à -8 degrés. consstelements=document.getElementsByClassName('rota

P粉322319601 · Answer

Solution CSS pure (la deuxième animation doit être évitée)

Vous n'avez pas besoin de JS ou de cours sophistiqués. transform 和 transition-duration C'est tout.

Commençons par HTML ; ceci est toujours votre code, mais simplifié :


  Just a basic explanation of the picture.

Maintenant, la partie principale : CSS. Puisque vos cartes pivotent de -8 degrés par défaut, nous avons ajouté une règle pour y parvenir :

.rotate_left {
  transform: rotate(-8deg);
  transition-duration: 1s;
  transition-delay: 0.25s;
}

Si . Polaroid悬停在其上，它会旋转回0度。这意味着我们可以使用伪类 :hover :

.polaroid:hover {
  transform: rotate(0deg);
}

Une fois que vous éloignez votre souris .poloid，:hover les règles ne s'appliquent plus. Cela signifie qu'il reviendra à la règle précédente dans un délai d'une seconde, à partir de 0,25 seconde après le départ de la souris.

Essayez-le :

.rotate_left {
  transform: rotate(-8deg);
  transition-duration: 1s;
  transition-delay: 0.25s;
}

.polaroid:hover {
  transform: rotate(0deg);
}

/* Demo only */

.polaroid {
  border: 1px solid #bfbfbf;
  border-radius: 2%;
  padding: 10px 15px;
  height: 200px;
  width: 280px;
  box-shadow: 10px 10px 5px #aaa;
}


  Just a basic explanation of the picture.

Empêcher la deuxième animation de s'arrêter

Pour éviter que la récupération ne s'arrête, du JS est requis.

Tout d'abord, nous déclarons quelques constantes :

const card = document.querySelector('.rotate_left');

const duration = 1000; // Duration of animation, in milliseconds.
const delay = 250; // Delay before animation, in milliseconds.

const keyframes = [
  { transform: 'rotate(-8deg)' },
  { transform: 'rotate(0deg)' },
];
const options = {
  duration, delay,
  fill: 'forwards'
};

Puis nous créons un handler :

const handler = () => {
  // New mouse over & leave should not mess with current animation.
  if (card.classList.contains('rotating')) {
    return;
  }
  
  // Let ourselves know that an animation is playing.
  card.classList.add('rotating');
  
  let animation;
  
  if (card.classList.contains('not_rotated')) {
    // Rotated to 0 degree, reverting.
    animation = card.animate([...keyframes].reverse(), options);
  } else {
    animation = card.animate(keyframes, options);
  }
  
  // Make sure we clean after ourselves after animation.
  animation.finished.then(() => {
    card.classList.remove('rotating');
    card.classList.toggle('not_rotated');
  });
};

Ajoutez-le en tant que gestionnaire d'événements pour 'mouseover'/'mouseleave' et nous avons terminé :

card.addEventListener('mouseover', handler);
card.addEventListener('mouseleave', handler);

Essayez-le :

const card = document.querySelector('.rotate_left');

const duration = 1000; // Duration of animation, in milliseconds.
const delay = 250; // Delay before animation, in milliseconds.

const keyframes = [
  { transform: 'rotate(-8deg)' },
  { transform: 'rotate(0deg)' },
];
const options = {
  duration, delay,
  fill: 'forwards'
};

const handler = () => {
  if (card.classList.contains('rotating')) {
    return;
  }
  
  card.classList.add('rotating');
  
  let animation;
  
  if (card.classList.contains('not_rotated')) {
    animation = card.animate([...keyframes].reverse(), options);
  } else {
    animation = card.animate(keyframes, options);
  }
  
  animation.finished.then(() => {
    card.classList.remove('rotating');
    card.classList.toggle('not_rotated');
  });
};

card.addEventListener('mouseover', handler);
card.addEventListener('mouseleave', handler);

.rotate_left {
  transform: rotate(-8deg);
}

/* Demo only */

.polaroid {
  border: 1px solid #bfbfbf;
  border-radius: 2%;
  padding: 10px 15px;
  height: 200px;
  width: 280px;
  box-shadow: 10px 10px 5px #aaa;
}


  Just a basic explanation of the picture.

Php8, je viens aussi

Apprenez la mise en page d'un site Web en 30 minutes

Tutoriel vidéo Shangguan Oracle débutant à compétent

Votre première ligne de code UNI-APP

Flutter de zéro au lancement de l'application

Brother Lian Nouveau didacticiel vidéo Linux

Tutoriel vidéo AXURE 9 (convient à l'interface utilisateur interactive de conception de produits du chef de produit)

Tutoriel vidéo PS Zero Basic Proficiency

Tutoriel vidéo de 16 jours sur l'interface utilisateur pour vous aider à démarrer

Tutoriel vidéo sur les techniques PS et les techniques de découpage

Tutoriel vidéo sur la construction et le lancement de projets d'Alibaba Cloud Environment

Présentation des réseaux informatiques - Connaissances de base que les programmeurs doivent maîtriser

Tutoriel essentiel pour les programmeurs - Explication du protocole HTTP

Tutoriel vidéo Websocket

Solution CSS pure (la deuxième animation doit être évitée)

Empêcher la deuxième animation de s'arrêter