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