如何在 3 秒后让一个块出现在页面上？ CSS答案

【问题标题】：How to make a block to appear on the page after 3 seconds? CSS如何在 3 秒后让一个块出现在页面上？ CSS
【发布时间】：2021-05-10 01:26:39
【问题描述】：

我正在使用 Python 的 Django 框架开发一个网站。在前端部分，我正在尝试在您访问页面后 3 秒出现一个分割块。

我将与您分享我的代码：

.computerScienceContent{
    text-align: center;
    display: block;
    position: relative;
    margin-top: 10px;
    margin-bottom: 50px;
    width: 700px;
    margin-left: auto;
    margin-right: auto;
    padding: 30px;
    padding-left: 20px;
    animation-delay: 2s;
    animation: 1s linear 1s slideInLeft;
}

上面的代码用于显示块。

此代码用于从左到右显示。

  @keyframes slideInLeft {
            0% {
              transform: translateX(-100%);
            }
            100% {
              transform: translateX(0);
            }
          }

这是我试图延迟显示的 html 中的 django 代码。

  <div class="computerScienceContent">
        {% for cat in category %}
            <div class="csDivContent" id="slide">
                <div id="slide">
                    <h4>{{ cat.name }}</h4>
                    <img src="{{ cat.img.url }}" alt="image" class="img">
                </div>
            </div>
        {% endfor %}
        </div>

基本上，我希望在访问网站后 3 秒显示块，一次显示一个条目，从左到右（只有 4 个条目）。如果有人可以提供帮助，我将非常高兴！非常感谢您的宝贵时间！

稍后编辑：我提供了一个代码示例：https://www.w3schools.com/code/tryit.asp?filename=GND7OAP8A72U

【问题讨论】：

这能回答你的问题吗？ How can I use delay() with show() and hide() in Jquery您在评论中提到您正在尝试使用 jquery...
您能否在您的问题中使用 sn-p 为我们提供一个可运行的示例，以便我们可以看到发生了什么？
我不知道如何使用sn-p。我是新手，也是编程新手......我会尝试找到一种方法......@ikiK它不起作用。我试过了，还是……

标签： javascript html css

【解决方案1】：

$('.computerScienceContent').delay(2000).toggle("slide:right");

.computerScienceContent {
  text-align: center;
  display: none;
  position: relative;
  margin-top: 10px;
  margin-bottom: 50px;
  width: 700px;
  margin-left: auto;
  margin-right: auto;
  padding: 30px;
  padding-left: 20px;
  animation: 1s linear 1s slideInLeft;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="computerScienceContent">
  {% for cat in category %}
  <div class="csDivContent" id="slide">
    <div id="slide">
      <h4>{{ cat.name }}</h4>
      <img src="{{ cat.img.url }}" alt="image" class="img">
    </div>
  </div>
  {% endfor %}
</div>

【讨论】：

【解决方案2】：

有多种方法。最简单的是使用javascript：

<style>
.computerScienceContent {
display: none;
}
</style>

<script>
setTimeout( ()=>{
    document.querySelesctor('.computerScienceContent').style.display = 'block'
    }, 3000)
</script>

【讨论】：

【解决方案3】：

您不能为显示属性设置动画，但您可以通过各种方式隐藏您的块，例如，只需将块的高度和宽度从 0 设置为 0 到 99%，然后自动设置为 100%。这是一个例子：

.block {
  animation: ani 3s linear;
}

@keyframes ani {
  0% {
    height: 0;
    width: 0;
    opacity: 0;
  }
  99% {
    height: 0;
    width: 0;
    opacity: 0;
  }
  100% {
    height: auto;
    width: auto;
    opacity: 1;
  }
}

<div class="block">
  <h1>Header of the article</h1>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Rerum tenetur possimus voluptas culpa pariatur ipsum minima vel atque ullam architecto optio blanditiis, ut laboriosam asperiores numquam assumenda nobis vitae eligendi.</p>
</div>

【讨论】：