使伪元素出现，然后在 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。

但是！使用可以删除的 class，您可以实现这一点。

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 中创建一个 class 并在 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 时间后再次消失

Making pseudo-element appear, and then disappear again after X amount of time

javascript

css

jquery

css-selectors

pseudo-element