JS-元素依次出现

前端Wai

已于 2023-01-31 11:19:36 修改

阅读量176

点赞数

分类专栏： CSS 文章标签： javascript 前端 html css

于 2023-01-31 11:05:19 首次发布

本文链接：https://blog.csdn.net/qq_46927610/article/details/128813919

版权

CSS 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

如果有该需求的朋友，下面提供了一个简单示例。可以直接粘贴复制拿走。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <style>
            ul {
                font-size: 30px;
            }
            li {
                transform: translateX(-100%);
            }
        </style>
    </head>
    <body>
        <ul>
            <li class="l1">
                Lorem ipsum dolor sit amet consectetur adipisicing
            </li>
            <li class="l2">
                Cumque amet a, repellendus voluptatem quae volupt
            </li>
            <li class="l3">
                Nesciunt explicabo voluptas aut aperiam nihil veritatis
            </li>
            <li class="l4">
                Nesciunt explicabo voluptas aut aperiam nihil veritatis
            </li>
        </ul>
        <button>出现</button>
        <script>
            let btn = document.querySelector("button");
            let list = document.querySelectorAll("li");
            let isBtn = false;
            // 依次显示的时间
            let timerArray = [1, 2, 3, 4, 5];
            btn.onclick = (e) => {
                list.forEach((element, index) => {
                    // 减0.3 - 上一个元素将要完成的时候，下一个元素依次出现
                    let time = timerArray[index] - 0.6;
                    let translateX = isBtn
                        ? "translateX(-100%)"
                        : "translateX(0%)";
                    element.style.cssText = `transition: all ${time}s; transform: ${translateX}`;
                });

                isBtn = !isBtn;
                timerArray.reverse();
                btn.innerHTML = isBtn ? "隐藏" : "出现";
            };
        </script>
    </body>
</html>