如何使动画在悬停时暂停,但一旦鼠标离开动画继续
P粉786800174
P粉786800174 2024-04-01 09:43:54
0
1
410

我已经厌倦了几个解决方案,这是我得到的最接近的解决方案。 但我仍然不满意结果如何,因为当鼠标离开元素时,元素会恢复到原来的旋转状态。 这个想法是,如果你越过该元素,即使鼠标离开该元素,它也会触发动画。如果你将鼠标悬停在元素上,它会播放动画并保持在 0 度,一旦鼠标离开,另一个动画就会播放,并旋转回 -8 度。

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>

非常感谢您的帮助。

一旦鼠标离开元素,就会有一个平滑的动画返回到原始旋转。

P粉786800174
P粉786800174

全部回复(1)
P粉322319601

纯 CSS 解决方案(第二个动画需要预防)

你不需要 JS 也不需要任何花哨的类。 transformtransition-duration 就可以了。

让我们从 HTML 开始;这仍然是您的代码,但经过简化:

Just a basic explanation of the picture.

现在,主要部分:CSS。由于您的卡默认旋转 -8 度,因此我们添加了一条规则来实现:

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

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

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

一旦您将鼠标移离 .poloid:hover 规则就不再适用。这意味着它将在 1 秒内恢复到之前的规则,从鼠标离开 0.25 秒后开始。

尝试一下:

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

防止第二个动画停止

为了防止恢复停止,需要一些 JS。

首先,我们声明一些常量:

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 = () => {
  // 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');
  });
};

将其添加为 'mouseover'/'mouseleave' 的事件处理程序,我们就完成了:

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

尝试一下:

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.

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责声明 Sitemap
PHP中文网:公益在线PHP培训,帮助PHP学习者快速成长!