X秒钟后如何使用javascript使div出现？

Question

我从JS开始，我想让10秒后出现以下代码的块。

https://jsfiddle.net/74hmx0vb/1

<div class='popup1' id="popup1">
  <div class="container">
    <div class="row rowpopup">
      <div class="iconpopup">
        <img class="imgpopup" src="" />
      </div>
      <div class="textpopup">
        <div class="textpopup1">

        </div>
        <div class="textpopup2">

        </div>
      </div>
      <button type="button" class="close" aria-label="Close">
        <span aria-hidden="true">&times;</span>
      </button>
    </div>
  </div>
</div>

当该块出现时，我还想添加一个滑入过渡。

该怎么做？

Answer 1

这是使用CSS进行动画制作。

通过设置.popup1将left: -350px;移出视图以为其动画做准备

然后@keyframes leftSlideIn将包含要制作动画的样式。

最后，使.popup1使用leftSlideIn进行动画处理。

animation-fill-mode中的

forwards将在动画结束后保留​​最后一个关键帧状态。

.popup1 {
  height: 100px;
  width: 300px;
  position: fixed;
  z-index: 99999;
  background: white;
  bottom: 50px;
  left: -350px;
  border-radius: 10px;
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.45);
  -moz-box-shadow: 0 0 30px rgba(0, 0, 0, 0.45);
  -webkit-box-shadow: 0 0 30px rgba(0, 0, 0, 0.45);
  animation: 1s leftSlideIn forwards;
  animation-delay: 10s;
}

@keyframes leftSlideIn {
  to {
    left: 50px;
  }
}

.rowpopup {
  display: inline-flex;
}

.textpopup {
  padding: 10px;
  margin-top: -15px;
}

.textpopup1 {
  font-size: 16px;
}

.textpopup2 {
  font-size: 14px;
}

.iconpopup {
  padding: 10px;
}

.imgpopup {
  width: 30px;
}

.hidepopup {
  display: none !important;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<div class="popup1" id="popup1">
  <div class="container">
    <div class="row rowpopup">
      <div class="iconpopup">
        <img
          class="imgpopup"
          src="https://cdn.shopify.com/s/files/1/0076/6931/7690/files/clock2.png?8339"
        />
      </div>
      <div class="textpopup">
        <div class="textpopup1">
          Order as soon as possible
        </div>
        <div class="textpopup2">
          there is little time remaining for this deal to end
        </div>
      </div>
      <button type="button" class="close" aria-label="Close">
        <span aria-hidden="true">&times;</span>
      </button>
    </div>
  </div>
</div>

Answer 2

这是一个jQuery CSS solution。我已经将hidepopup类添加到内容的主要div中。我在10秒钟后将其删除，并添加了动画类。

$(document).ready(function(){
	setTimeout(displayBox, 10000);
});

function displayBox(){
	$('.popup1').removeClass('hidepopup');
	$('.popup1').addClass('anim-effect ');
}

.popup1 {
    height: 100px;
  width:300px;
  position: fixed;
  z-index: 99999;
  background: white;
  border-radius: 10px;
  box-shadow: 0 0 30px rgba(0,0,0,0.45);
}

.anim-effect{
  bottom: 50px;
  left:50px;
  -webkit-animation: slideIn 1s forwards;
  -moz-animation: slideIn 1s forwards;
  animation: slideIn 1s forwards;
}

@-webkit-keyframes slideIn {
  0% {
    transform: translateX(-900px);
  }
  100% {
    transform: translateX(0);
  }
}


  
.rowpopup {
  display: inline-flex;
}
  
.textpopup {
  padding: 10px;
  margin-top: -15px;
}
  
.textpopup1 {
  font-size:16px;
}
  
.textpopup2 {
  font-size:14px;
}
  
.iconpopup {
  padding:10px;
}
  
.imgpopup {
  width:30px;
}
  
.hidepopup {
  display: none !important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">


<div class='popup1 hidepopup' id="popup1">
      <div class="container">
		<div class="row rowpopup">
          <div class="iconpopup">
            <img class="imgpopup" src="https://cdn.shopify.com/s/files/1/0076/6931/7690/files/clock2.png?8339" />
          </div>
          <div class="textpopup">
            <div class="textpopup1">
              Order as soon as possible
            </div>
            <div class="textpopup2">
              there is little time remaining for this deal to end
            </div>
          </div>
          <button type="button" class="close" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
      </div>
  	</div>

Answer 3

document.getElementById("div_to_display").style.display="block"},time);

因此示例代码将如下所示

document.getElementById("textpopup1").style.display="block"},10000);

textpopup1将在10秒后显示。