有没有办法在给定的时间范围内改变不透明度，而无需在实验室.js按下按钮

Question

我正在设计一个实验，我希望线条不透明度在给定的时间范围内改变，而不是点击按钮

// Setup event handler
this.options.events['click button'] = () => {
    getLines().forEach(line => {
        line.style.opacity -= step
    })
}

Answer 1

你可以

使用 setInterval

let opacity = 1;
const reduceOpacity = function(){
  getLines.forEach(line =>{
    line.style.opacity = opacity;
    })
    opacity -= 0.1;
  }
const myTimer = setInterval(reduceOpacity, 1000);

我做了一个小提琴来说明 https://jsfiddle.net/ninjasoards/bwzg3xfp/

我添加了一个触发clearInterval((的停止按钮。

仅 CSS 答案

您也可以为此使用 CSS(以及更多(

.fade-out {
  animation: hide 4s ease-in forwards;
}
@keyframes hide {
  0% { opacity: 1; }
  100% { opacity: 0; }
}

看到这个小提琴 https://jsfiddle.net/ninjasoards/xcbw1gdr/

左圆淡出

并保持淡出，右圆无限淡入淡出。

Answer 2

您可以尝试使用setTimeout函数，该函数将在指定的毫秒数后触发。

  setTimeout(() => {
    getLines().forEach(line => {
        line.style.opacity -= step
    });
  }, 2000);