Question

所以说我希望div 2在2秒后出现，div 2在7秒后出现，div 3在15秒后出现。

有没有办法让我添加一个内联样式元素，使div从隐藏但占用空间变为完全可见。

我一直在搜索，我发现的大部分内容都是悬停/点击触发。我似乎找不到任何有时间触发器的东西。

谢谢。

编辑：为了更清楚，我正在寻找任何有时间延迟出现的代码。当我搜索转换时，我会根据操作获得一堆代码，例如点击或悬停。我不是在寻找用户操作来触发这个，只是一次。

当我搜索动画时，我得到一堆关于动态图像的结果，我也不需要。

当我搜索时间延迟时，我得到一堆关于时间延迟转换的结果，这是用户操作发生后多长时间仍然需要用户输入的转换，我不想要用户输入。

我更想问我应该寻找什么，如果有一个词或者你熟悉的话就是这样。我没有提供任何代码，因为我不想让你给我编码。我要求领导，因为我找不到合适的词来确定我需要的东西令人沮丧。

Answer 1

您可以使用css过渡来在样式表中设置延迟后为visibility属性设置动画，或者可以使用JS和setTimeout（）更改visibility属性;

HTML

<div id="div1" style="visibility:hidden;"></div>

JS

setTimeout(function(){
document.getElementById('div1').style.visibility = "visible";
},1000);

这将设置一个回调以在1000毫秒或1秒后覆盖css属性。

对于纯css解决方案，我们可以使用它。我们需要提供多个属性的多个，以实现跨平台兼容性。

@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
.fade-in {
    opacity:0;
    -webkit-animation:fadeIn ease-in 1;
    -moz-animation:fadeIn ease-in 1;
    animation:fadeIn ease-in 1;

    -webkit-animation-fill-mode:forwards; 
    -moz-animation-fill-mode:forwards;
    animation-fill-mode:forwards;

    -webkit-animation-duration:1s;
    -moz-animation-duration:1s;
    animation-duration:1s;
}

因此，这个名为淡入的类为它添加的任何元素添加1s动画，它会在它按原样加载后立即启动。它基于不透明度，因此当它不可见时会占用空间，如果你不想要它，你需要在显示器上使用变体：none。

可以使用

将延迟添加到元素中

-webkit-animation-delay: 2s;
-moz-animation-delay: 2s;
animation-delay: 2s;

只需为每个＆＃39;幻灯片设置不同的值即可。让他们在不同时间淡出。

Answer 2

如果你想占用空间 - 这意味着你不想让事情崩溃，我会创建div，然后将它display设置为none，然后opacity到0。这将隐藏元素，但仍会占用页面上的物理空间。

然后我会创建一个名为＆＃34; show＆＃34;的css类。或类似的东西：

<强> CSS：

.show {
    opacity: 1;
    transition: opacity 1s ease-in-out;
    -webkit-transition: opacity 1s ease-in-out;
    -moz-transition: opacity 1s ease-in-out;
    -ms-transition: opacity 1s ease-in-out;
    -o-transition: opacity 1s ease-in-out;
}

然后使用jQuery（或javascript），您可以使用setInterval或setTimeOut。在你的超时功能中，你可以动态地分配＆＃34; show＆＃34;每个元素的类。这会在'＆＃34; x＆＃34;之后淡化每个元素。你指定的秒数。

这样的事情：

<强> jQuery的：

 $(function() {
     setTimeout(function(){
         showElement();
      }, 3000);

     function showElement() {
         $('my-div').toggleClass('show');
     }
  });

如何为我的div添加时间延迟，以便它们像powerpoint幻灯片一个接一个地出现？

2 个答案: