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 个答案: