使伪元素出现，然后在X时间后再次消失

Question

我试图操纵我的body标签的：before伪元素在一段时间后出现，然后在几秒钟后再次消失。

body:before {
  content: " ";
  width: 100%;
  height: 100%;
  position: fixed;
  z-index: 100;
  top: 0;
  left: 0;
  background: #color;
}

因此，从本质上讲，我试图在X秒钟后显示带有伪元素的完整视口叠加层，然后经过一段时间后，我想再次将其删除！

我该如何解决？

Answer 1

您不能操纵伪元素，因为它们不在DOM中。

但！ 使用可以删除的类，您可以实现这一目标。

 setTimeout(function(){ $("body").removeClass("red"); },2000);

 body{ height:2000px; } body.red:before { content: " "; width: 100%; height: 100%; position: fixed; z-index: 100; top: 0; left: 0; background: #f00; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <body class="red"> Blah blah bla... Ya ya ya... </body>

Answer 2

您可以使用纯CSS执行以下操作：

 body:before { content: " "; width: 100%; height: 100%; display: block; position: fixed; z-index: 100; top: 0; left: 0; background: red; animation: show 5s ease-out forwards; } @keyframes show{ 0%{ content: ""; opacity: 0; } 20%{ content: ""; opacity: 1; } 90%{ content: ""; opacity: 1; } 100%{ content: none; opacity: 0; } }

 Hello World!

要选择持续时间，只需调整字母“ s”前的数字即可，秒表示第二个：

animation: show ***5s*** ease-out forwards;

Answer 3

您不能在JS中更改伪元素，因为它只能处理DOM元素

所以我要做的是在JavaScript中创建一个创建类，并在4秒钟后将其删除

这是我的方法：

的HTML

<body class="ID">

的CSS

.ID:before {
     content: " ";
     width: 100%;
     height: 100%;
     position: fixed;
     z-index: 100;
     top: 0;
     left: 0;
     background: red;
     }

的JavaScript

setTimeout(() => {
document.querySelector('.ID').classList.remove('ID')
}, 4000);

使伪元素出现，然后在X时间后再次消失

问题描述

3 个解决方案

解决方案1
3 2018-08-17 16:19:55

解决方案2
3 已采纳 2018-08-17 16:28:12

解决方案3
2 2018-08-17 16:37:55

使伪元素出现，然后在X时间后再次消失

问题描述

3 个解决方案

解决方案1 3 2018-08-17 16:19:55

解决方案2 3 已采纳 2018-08-17 16:28:12

解决方案3 2 2018-08-17 16:37:55

解决方案1
3 2018-08-17 16:19:55

解决方案2
3 已采纳 2018-08-17 16:28:12

解决方案3
2 2018-08-17 16:37:55