Есть ли способ сделать изменение непрозрачности в данный период времени без нажатия кнопки в 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);