javascript - 有没有办法在给定的时间范围内改变不透明度，而无需在 lab.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);