Question

假设我有 n 元素，其属性为 data-show-after =＆＃34; miliseconds＆＃34;

我希望在 data-show-after

之后显示元素

示例：

<div class="animate-template" data-show-after="1000">
  Show me this element!
</div>

<div class="animate-template" data-show-after="2000">
  Show me this element!
</div>

<div class="animate-template" data-show-after="15000">
  Show me this element!
</div>

最好的方法是什么？要遍历具有类名 animate-template 的所有元素，并为每个元素创建计时器，或者创建具有最大值的计时器（对于所有元素），然后检查何时。如果元素属性的时间与计时器中的当前时间相同 - ＆gt;显示元素

我还需要隐藏元素，添加动画和传出动画，所以也需要牢记这一点。

<div class="animate-template" data-show-after="15000" data-hide-after="1000">
  Show me this element!
</div>

Answer 1

看看这个例子。我把5s作为值你可以改变它。

＆＃13;

  setTimeout(function(){
        document.getElementById('hide-1').className = 'hide';
    }, 5000);

＆＃13;

 p {
        opacity:1;
        transition:opacity 500ms;
    }
    p.hide {
        opacity:0;
    }

＆＃13;

    <p id="hide-1">OHAI!</p>

＆＃13;

Answer 2

可以使用delay()

完成此操作

通过一些小的修改，您可以实现所需。

此外，here是一篇文章，其中包含一些如何处理该主题的建议。它解释了如何使用setTimeout()和setInterval()。

在属性中按时间显示元素

2 个答案: