Как просмотреть список, используя jQuery - PullRequest
Новая
       16

Как просмотреть список, используя jQuery

0 голосов
/ 09 апреля 2020

У меня есть следующая страница, которая использует css & jQuery для анимации элементов списка. Он начинается с первого (сверху) и проходит по каждому вхождению, пока все они не отобразятся. Он использует CSS, чтобы сделать элементы видимыми.

То, что я хочу сделать, заставляет его начинать снизу, а не сверху списка, поэтому сначала показывается последний элемент, а первый - последний. По сути, измените порядок, в котором он находится на данный момент.

Я понимаю, что это должно быть довольно просто, но я изо всех сил пытаюсь понять это. Я предполагаю, что логика c должна быть сделана в l oop в теге сценария 

<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>

Любой совет будет оценен,

спасибо

1 Ответ

0 голосов
/ 09 апреля 2020

В настоящее время вы просматриваете список items с помощью: 

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

Вы можете выполнить итерацию в обратном порядке, выполнив: 

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