javascript - 如何在 webOS 上创建不透明效果？

Question

我的页面中有一个 html 视频元素:

<video id="myVideo" src = "./play.mp4" autoplay loop></video>

我正在通过这样的操作让它消失:

var vid = document.getElementById("myVideo");
vid.style.visibility = "hidden";

我可以用

让它再次出现

vid.style.visibility = "visible";

但我希望视频能够顺利播放，如何通过 javascript 执行此操作？

我试过了:

vid.style.transition   = "visibility 2s";
vid.style.visibility = "visible";

但是没有用。谁能指出我的错误？ (webOS 平台不支持 jquery 和 opacity css 属性)

I cannot use opacity :( --> Developer documentation : The opacity property is unapplicable on video elements.

Answer 1

您可以将 css transition 和 rgba 格式与一些 javascript 结合使用来添加不透明动画，而无需 css opacity 属性。

var hide = document.getElementById('tryh'),
    show = document.getElementById('trys'),
    foo  = document.getElementById('foo');

show.addEventListener('click', function () {
  foo.className = 'foo show';
});

hide.addEventListener('click', function () {
  foo.className = 'foo hide';
});

.foo {
  position: relative;
  background: rgba(0,0,0,0);
  transition: background-color 1s;
}

.hide {
  background-color: rgba(255,255,255,1);
}

.show {
  background-color: rgba(0,0,0,0);
}

.foo:before {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  background-color: inherit;
  content: ' ';
}

<div id='foo' class='foo'>
  <video id="video" src="./play.mp4" controls autoplay loop ></video>
</div>

<button id='trys'>Show</button>
<button id='tryh'>Hide</button>