如何在一个div中一个接一个地显示元素？答案

【问题标题】：How to display elements inside a div one after another?如何在一个div中一个接一个地显示元素？
【发布时间】：2023-03-04 23:16:02
【问题描述】：

我正在尝试为某些元素设置动画。内容包装器 div 中有跨度。一旦我们到达带有content-wrapper 类的div，b-fadein 类就会被添加到每个span 中，并且动画应该开始，并且span 应该一个接一个地出现。

$(window).scroll(function() {
        $('.el').each(function(){
        var pos = $(this).offset().top;

        var topOfWindow = $(window).scrollTop();
            if (pos < topOfWindow+400) {
                $(this).addClass("b-fadein");
            }
        });
    });

动画。

.b-fadein {
  /* hidden by default */
  opacity: 0;
  animation: fadeIn 0.5s linear forwards;
  animation-delay: calc(0.5 * var(--i));
}

@keyframes fadeIn {
  from {
    /* is not visible*/
    opacity: 0;
  }
  to {
    /* is visible */
    opacity: 1;
  }
}

HTML

<div class="content-wrapper" style="">
  <!-- 0 -->
  <span style="--i: 0; opacity:0;" class="el el1">1</span>
  <!-- 1 -->
  <span style="--i: 1; opacity:0;" class="el el2">2</span>
  <!-- 2 -->
  <span style="--i: 2; opacity:0;" class="el el3">3</span>
  <!-- if more elements, increase the --i css variable for next elements -->
</div>

目前，只有当content-wrapper 中的每个跨度显示为一条线（flex-direction 设置为列）时，才能看到所需的效果。但所有跨度都可以在同一行。
问题是，如果它们在同一行，一旦我们到达content-wrapper，它们就会同时显示。
到达 content-wrapper div 后，如何一个接一个地显示 span？

【问题讨论】：

标签： javascript html jquery css

【解决方案1】：

你不需要 jQuery，你可以使用 javascript vanilla Intersection Observer API 来跟踪你的 span intersection ratio

基本上，您需要按照以下步骤操作：

为 span 元素添加不透明过渡，并具有所需的延迟
将基础opacity:0 添加到 span 元素
创建一个Intersection Observer
根据entry.intersectionRatio 将当前entry.target.style.opacity（当前跨度）更改为“1”

演示：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <style type="text/css">
            body {
                /* for demo purposes only */
                margin: 30em 0;
            }
            body span {
                /* for demo purposes only */
                display: flex;
                flex-direction: row;
                opacity: 0;
                font-size: 1.5em;
                padding: 3.33em 0;
                transition: opacity 1200ms linear;
            }
        </style>

        <title>Intersection Observer API</title>
    </head>
    <body>
        <section id="content-wrapper">
            <span>span item</span>
            <span>span item</span>
            <span>span item</span>
            <span>span item</span>
            <span>span item</span>
            <span>span item</span>
            <span>span item</span>
            <span>span item</span>
            <span>span item</span>
        </section>

        <script>
            let observer = new IntersectionObserver(
                (entries, observer) => {
                    entries.forEach((entry) => {
                        if (entry.intersectionRatio) {
                            entry.target.style.opacity = '1'
                            observer.unobserve(entry.target)
                        }
                    })
                },
                { rootMargin: '0px 0px 100px 0px' },
            )
            document.querySelectorAll('span').forEach((span) => {
                observer.observe(span)
            })
        </script>
    </body>
</html>

Intersection Observer API 的完整信息：https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API

【讨论】：

【解决方案2】：

$('span').each(function(i) {
    (function(self) {
        setTimeout(function() {
            $(self).addClass('b-fadein');
        },(i*1500)+1500);
    })(this);
});

当您到达 content-wrapper 时，只需添加此 jquery 代码。我认为这将帮助您一个接一个地显示跨度。我刚刚添加了一个 setTimeout 函数来为将类添加到您的 span 提供延迟。

【讨论】：