如何使用 javascript 使多个 div 一个接一个出现？

Question

我正在尝试为聊天设置动画。 每次用户单击输入字段或“发送”图标时，我希望聊天气泡一个接一个地出现。 到目前为止，这是我的代码的一部分。 现在，他们都有“显示：无”。 下图显示了没有它的它们。

 <div class="messages">
            <div class="message" id="msg1" style="display: none;">Hi! I'm looking for an old friend. She attended Martin Grove a few years ago.</div>
            <div class="message" id="msg2" style="display: none;">Her name is Sam.<br>
                <i>*insert pic of Sam and MC*</i></div>
            <div class="message" id="msg3" style="display: none;">Did you know her or her last name by any chance? </div>
            <div id="msg4" class="message-teacher" style="display: none;">Hello there!</div>
            <div class="message-teacher" id="msg5" style="display: none;">Unfortunately, I did not have the pleasure of teaching Sam. Her last name and whereabouts are a mystery to me as well. </div>
            <div class="message-teacher" id="msg6" style="display: none;">However, I do know she was in the photography club. I always saw her carrying a camera, always taking pictures. </div>
            <div class="message-teacher" id="msg7" style="display: none;">In fact, I believe she won a contest for one of them. </div>
            <div class="message-teacher" id="msg8" style="display: none;">She’s a super talented girl!</div>
            <div class="message-teacher" id="msg9" style="display: none;">Best of luck on your search. I hope you two are reunited soon!</div>
        </div>

        <div class="input">
            <div class="plus-icon" style="font-size: 25px; color: #2A84FF; margin: auto;">
                <i class="fas fa-plus-circle"></i>
            </div>
            <div class="subinput" style="font-size: 25px; color: #2A84FF; margin: auto;">
                <input type="text" placeholder="|" />
                <i class="fas fa-smile"></i>
            </div>

            <div class="btn" style="font-size: 23px; color: #2A84FF; margin: auto;"><i class="fas fa-paper-plane"></i></div>
        </div>

Answer 1

我会查询所需的元素，从中创建一个数组，然后shift() （也就是删除数组的第一个元素 - 或者您可以使用pop()删除最后一个元素，具体取决于您的需要）。 当您从数组中弹出或移动一个元素时，这些函数会返回已删除的元素，我们可以删除 CSS class 将这些元素隐藏在 DOM 中。

 const myHTMLCollection = document.getElementsByClassName("invisible"); const HTMLElementsArr = [...myHTMLCollection]; function showMessage() { if (HTMLElementsArr.length > 0) { HTMLElementsArr.shift().classList.remove('invisible'); } }

 .invisible { display: none; }

 <p class="invisible">Some text 1 click</p> <p class="invisible">Some text 2 clicks</p> <p class="invisible">Some text 3 clicks</p> <button onClick="showMessage()">Show a message</button>