如何使用 jQuery 反转列表

Question

我有以下页面，它使用 css 和 jQuery 来设置列表元素的动画。它从第一个（顶部）开始并循环遍历每个事件，直到它们全部显示出来。它使用 CSS 使元素可见。

我想要做的是让它从列表的底部而不是顶部开始，因此首先显示最后一个元素，最后显示第一个元素。基本上颠倒了它现在的顺序。

我知道这应该很简单，但我正在努力弄明白。我认为逻辑必须在脚本标记

的循环中完成

<ul class="list">
    <li>
        <h1>Position 1</h1>
        <p>Lorem Ipsum</p>
    </li>
    <li>
        <h1>Position 2</h1>
        <p>Lorem Ipsum</p>
    </li>
    <li>
        <h1>Position 3</h1>
        <p>Lorem Ipsum</p>
    </li>
    <li>
        <h1>Position 4</h1>
        <p>Lorem Ipsum</p>
    </li>
    <li>
        <h1>Position 5</h1>
        <p>Lorem Ipsum</p>
    </li>
</ul>
<style>

@import url('https://fonts.googleapis.com/css?family=Roboto');

.list{
    margin:3em auto;
    list-style: none;
    padding: 0;
 }

.list li{
    visibility: hidden;
    margin-left: 0;
    padding-left: 72px;
    padding-right: 16px;
    padding-bottom: 16px;
    padding-top: 16px;
    position: relative;
}

@keyframes slideInLeft {
    from {
    transform: translate3d(-100%, 0, 0);
    visibility: visible;
    }

    to {
    transform: translate3d(0, 0, 0);
    }
}

.slideInLeft {
    animation-name: slideInLeft;
    animation-duration: 250ms; 
    visibility: visible !important;
}

</style>
<script>
(function(){
'use strict'

    var items = document.getElementsByTagName('li')

    function doSetTimeout(i) {
      //console.log(items)
      var t = items[i]
        setTimeout(function(){ 
            t.className = 'slideInLeft'; 
        }, (i+1) * 1150);
    }

    for (var i = 0; i < items.length; ++i)
      doSetTimeout(i);

})()
</script>

如有任何建议，我们将不胜感激，

谢谢

Answer 1

您当前正在迭代 items 的列表：

for (var i = 0; i < items.length; ++i)

您可以通过以下方式反向迭代：

for (var i = items.length-1; i >= 0; i--)

如何使用 jQuery 反转列表

How to reverse through list using jQuery

javascript

css

jquery

reverse

loops