时间戳

首页 > 解决方案 > 悬停时动画进度条和退出时反向动画？

javascript - 悬停时动画进度条和退出时反向动画？

问题描述

我正在尝试做类似https://2016.makemepulse.com（点击并按住位）之类的事情，其中

  1. 悬停时，进度条向前动画，试图达到 100
  2. 退出时，bar 向后动画，试图到达 0（如果还不是 0）

有很多关于悬停动画前进的例子，目前正在尝试如何在悬停时显示进度条？

但它不会在退出时倒退。我怎样才能做到这一点？

标签： javascripthtmlcss

解决方案

在增加进度的事件中运行一个间隔函数onmouseenter并清除它，如果进度达到 100，当悬停结束时（onmouseleave）清除它仍在运行的前一个间隔情况，反之亦然：

const bar = document.querySelector('.prg');
const hoverMe = document.querySelector('.hoverMe');
let intrval;
let prg = 0;
hoverMe.onmouseenter = (e) => {
    interval = setInterval(() => {
  	prg++;
    bar.style.width = prg + '%';
    bar.innerText = prg + '%';
    if(prg >= 100) {
    	clearInterval(interval);
    }
  }, 50);
}

hoverMe.onmouseleave = () => {
	clearInterval(interval);
	interval = setInterval(() => {
  	prg--;
    bar.style.width = prg + '%';
    bar.innerText = prg + '%';
    if(prg <= 0) {
    	clearInterval(interval);
    }
  }, 50);
}
div {
    background: cyan;
}
.prg {
    height: 16px;
    background: blue;
    color: white;
    width: 0;
    text-align: center;
}
<div class="hoverMe">
<div class="prg"></div>
</div>

推荐阅读