使用隐藏元素进行过渡

Question

我有一个带有隐藏视频的 html 代码。当我将鼠标悬停在文本上时，视频将可见并开始播放。过渡很快。所以我想制作一种淡入或滑入效果。但是当我想在我的 css 中添加一条过渡线时，孔代码停止工作。

我在互联网上看到您无法转换隐藏元素，但是我应该如何更改代码以使视频淡入效果。

非常感谢！

代码：

<div scroll="no" style="overflow: hidden">
<video id="Hvideo" width="700" height="100%" controls hidden muted loop>
    <source src="https://www.w3schools.com/jsref/movie.mp4" type="video/mp4">
    <source src="https://www.w3schools.com/jsref/movie.ogg" type="video/ogg">
    Your browser does not support the video tag.
</video>  
<div id="Htext">
    <button id="Htext" onmouseover="PlayH()" onmouseout="PauseH()">HVAC</button>
</div>
<script>
  var Htext=document.getElementById("Htext");
  var Hvideo=document.getElementById("Hvideo");

  function PauseH(){
    Hvideo.pause();
    Hvideo.hidden = true;
  }

  function PlayH(){
  if(Hvideo.paused) {
   Hvideo.play();
   Hvideo.hidden = false;
   }    
  }
</script>

css:

#Htext{
background: none;
border: none;
font-size: 50px;
padding-bottom: 30px;
position: relative;
top: 10px;
left: 30px;
overflow: hidden;

}

#Hvideo{
position: absolute;
top: 0%;
right: -20%;
overflow: hidden;
}

#Hvideo::-webkit-media-controls-enclosure{
display: none;
overflow: hidden;
}

Answer 1

您可以使用这个 CSS 并保持 JS 的原样：

#Hvideo[hidden] {
  display: block;
  visibility: visible;
  opacity: 0;
}
#Hvideo:not([hidden]) {
  opacity: 1;
}
#Hvideo {
  transition: opacity 0.4s ease-in-out;
}