在javascrypt中逐渐淡化var元素

Question

如何从1不透明度逐渐变为0？我是javascript的新手，想知道如何通过单击按钮来淡化元素。此代码用于在我的网站上播放和暂停视频。这个想法是，一旦你点击播放按钮，按钮就会逐渐消失，显示视频。据我所知，我已经设置了一个变量，它可以一次降低不透明度，但现在是逐渐的。

以下是我迄今为止所尝试的：

<video loop id="myVideo">
<source src="y-join_vid.mp4" type="video/mp4">
</video>

<div class="play_area">
<div>
<img src="x-join_img.png" onclick="playVid()" id="mybtn">
</div>
</div>
<script> 
var vid = document.getElementById("myVideo"); 
var btn = document.getElementById("mybtn")
function playVid() { 
vid.play(); 
btn.style.opacity= "0.0"
} 
</script> 

Answer 1

有两个选项，CSS或JS

在CSS中：

#mybtn {
opacity: 1;
transition: opacity 2s ease;
}
#mybtn.clicked {
opacity: 0;
}

然后您需要在JS:中创建一个事件侦听器

const btn = document.querySelector("#mybtn");
btn.addEventListener("click", ()=> {
btn.classList.toggle("clicked");
}

如果你想要一个纯JS方法，试试这个：

const fadeOut = () => {
const btn = document.querySelector("#mybtn");
let i = +btn.style.opacity;
i -= 0.05;   //this controls the fadeout speed
el.style.opacity = i;
if (i > 0) requestAnimationFrame(fadeOut);
}

然后添加一个事件侦听器，并将函数作为回调传递：

const btn = document.querySelector("#mybtn");
btn.addEventListener("click", fadeOut);

Answer 2

您可以简单地使用css转换：

<style>
#mybtn{
transition: opacity 1s;
}
</style>