我的HTML / CSS / Js代码如下：
let con = document.getElementById("container")
setTimeout(function(){
// while(con.hasChildNodes){
// con.removeChild(con.firstChild)
// }
con.style.display = "none"
},3 * 1000)#container{
width: 100%;
height: 1080px;
background: #00ff00
}
.item{
width: 100px;
height: 200px;
background: #ff00ff;
animation: move 2s linear infinite;
}
@keyframes move{
0%{
transform: translateX(100px)
}
100%{
transform: translateX(200px)
}
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>page not refresh</title>
<link rel="stylesheet" href="./css.css">
</head>
<body>
<div id="container">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
<script src="js.js"></script>
</body>
</html>在Chrome或Firefox中，可以在3秒后隐藏UI。在Cobalt中，用户界面3秒后无法隐藏。
如果我们从Cobalt中的css文件中删除动画，则可以在3秒后成功隐藏UI。
如何在页面上有动画时隐藏UI？
钴只提供必要的区域。如果没有任何东西可以渲染，它就什么都不做。在您的情况下，没有指定的背景颜色，因此隐藏项目后无需更新。设置背景颜色应该可以解决问题，因为这意味着在隐藏项目后会有一些要渲染的东西 - 这是'白色'。
body {
background-color: white;
}