Question

我的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？

Answer 1

Cobalt只提供必要的区域。如果没有任何东西可以渲染，它就什么都不做。在您的情况下，没有指定的背景颜色，因此隐藏项目后无需更新。设置背景颜色应该可以解决问题，因为它意味着在隐藏项目后会有一些东西要呈现 - 这是'白色'。

body {
  background-color: white;
}

Cobalt - 当页面上有css动画时，无法隐藏UI

1 个答案: