Cara membuat animasi berhenti seketika pada tuding tetapi teruskan sebaik sahaja tetikus pergi

Question

Saya sudah bosan dengan beberapa penyelesaian dan ini adalah yang paling hampir saya dapat. Tetapi saya masih tidak berpuas hati dengan bagaimana ia berubah, kerana apabila tetikus meninggalkan elemen, elemen itu kembali kepada putaran asalnya. Ideanya ialah jika anda menyemak elemen, ia akan mencetuskan animasi walaupun tetikus meninggalkan elemen. Jika anda menuding di atas elemen, ia akan bernyawa dan kekal pada 0 darjah, dan sebaik sahaja tetikus pergi, animasi lain akan dimainkan dan berputar kembali kepada -8 darjah.

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>

Terima kasih banyak atas bantuan anda.

Sebaik sahaja tetikus meninggalkan elemen, terdapat animasi yang lancar kembali ke putaran asal.

Answer 1

Penyelesaian CSS tulen (animasi kedua perlu dihalang)

Anda tidak memerlukan JS atau mana-mana kelas mewah. transform 和 transition-duration Itu sahaja.

Mari mulakan dengan HTML; ini masih kod anda, tetapi dipermudahkan:

  
Just a basic explanation of the picture.

Sekarang, bahagian utama: CSS. Memandangkan kad anda diputar sebanyak -8 darjah secara lalai, kami telah menambahkan peraturan untuk mencapai ini:

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

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

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

Sebaik sahaja anda menjauhkan tetikus anda .poloid，:hover peraturan tidak lagi terpakai. Ini bermakna ia akan kembali kepada peraturan sebelumnya dalam masa 1 saat, bermula 0.25 saat selepas tetikus pergi.

Cubalah:

.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.

Halang animasi kedua daripada berhenti

Untuk mengelakkan pemulihan daripada terhenti, beberapa JS diperlukan.

Pertama, kami mengisytiharkan beberapa pemalar:

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'
};

Kemudian kita buat pengendali:

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');
  });
};

Tambahkannya sebagai pengendali acara untuk 'mouseover'/'mouseleave' dan kami selesai:

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

Cubalah:

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.