Maison > Questions et réponses > le corps du texte
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 s'animera et restera à 0 degré, et une fois la souris partie, une autre animation sera jouée et pivotera à nouveau à -8 degrés.
const elements = document.getElementsByClassName('rotate_left'); for (let i = 0; i <= elements.length; i++) { elements[i].addEventListener('animationend', function(e) { elements[i].classList.remove('animated') /*elements[i].classList.add('animatedback')*/ }); elements[i].addEventListener('mouseover', function(e) { elements[i].classList.add('animated') elements[i].classList.remove('animatedback') }); }
.rotate_left { -ms-transform: rotate(-8deg); -webkit-transform: rotate(-8deg); transform: rotate(-8deg); transition-duration: 1s; transition-delay: 0.25s; } .polaroid { width: 280px; height: 200px; padding: 10px 15px 100px 15px; border: 1px solid #BFBFBF; border-radius: 2%; background-color: white; box-shadow: 10px 10px 5px #aaaaaa; } .polaroid:hover { width: 280px; height: 200px; padding: 10px 15px -100px 15px; border: 1px solid #BFBFBF; border-radius: 2%; background-color: white; box-shadow: 10px 10px 5px #aaaaaa; -ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); transform: rotate(0deg); transition-duration: 1s; transition-delay: 0.25s; } @keyframes animationBegining { from { -ms-transform: rotate(-8deg); /* IE 9 */ -webkit-transform: rotate(-8deg); /* Safari */ transform: rotate(-8deg); } to { -ms-transform: rotate(0deg); /* IE 9 */ -webkit-transform: rotate(0deg); /* Safari */ transform: rotate(0deg); } } @keyframes animatedBack { form { -ms-transform: rotate(0deg); /* IE 9 */ -webkit-transform: rotate(0deg); /* Safari */ transform: rotate(0deg); } to { -ms-transform: rotate(-8deg); /* IE 9 */ -webkit-transform: rotate(-8deg); /* Safari */ transform: rotate(-8deg); } } .animatedback { animation: animatedBack 2s; } .animated { animation: animationBegining 2s; }
<div id="modalWrepper1" class="polaroid rotate_left"> <p class="caption">Just a basic explanation of the picture.</p> </div>
Merci beaucoup pour votre aide.
Une fois que la souris quitte l'élément, une animation fluide revient à la rotation d'origine.
P粉3223196012024-04-02 00:03:49
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.
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.