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

【问题标题】：Making pseudo-element appear, and then disappear again after X amount of time使伪元素出现，然后在 X 时间后再次消失
【发布时间】：2019-01-24 17:31:33
【问题描述】：

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

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

所以，本质上，我试图在 X 秒后用伪元素显示这个完整的视口叠加层，然后过了一段时间，我想再次删除它！

我该如何解决这个问题？

【问题讨论】：

你不能使用 js，但可以像这里一样使用 css 动画：stackoverflow.com/questions/7809872/…

标签： javascript jquery css css-selectors pseudo-element

【解决方案1】：

你可以用纯 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;

【讨论】：

感谢您提出这个想法，这是解决这个问题的好方法。我最终对其进行了一些修改，因为我需要在一定时间后出现叠加层。这可以通过像 animation-delay: 50s; 那样向动画添加延迟来完成，我最终在这里做的另一件事是删除 display 属性，因为它会使您无法在伪内容之前与站点内容交互元素已被清除。我解决这个问题的方法是使用“可见性”属性！

【解决方案2】：

在 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);

【讨论】：

【解决方案3】：

你不能操纵伪元素，因为它们不在 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>

【讨论】：