Question

我正在尝试做类似https://2016.makemepulse.com（点击并按住位）的操作

悬停时，进度条会向前动画以尝试达到100
退出时，bar向后动画以尝试达到0（如果尚未为0）

有许多悬停的动画前向示例，目前正在尝试How to show progress bar on hover?

但是退出时不会倒退。我该怎么办？

Answer 1

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

在悬停时设置动画进度栏，并在退出时反向设置动画？

1 个答案: