Как добавить элемент и анимировать все остальные для слайда, а также удалить последний элемент - PullRequest
Новая
       50

Как добавить элемент и анимировать все остальные для слайда, а также удалить последний элемент

0 голосов
/ 30 сентября 2018

Я надеюсь, что смогу добавить новый блок в набор, когда следующий блок будет добавлен, все кадры сместятся вправо и последний ребенок изящно исчезнет из списка через секунду ..

в основномДобавляется 1 блок, последний исчезает, в то время как все блоки сдвигаются вправо, так что в родительском элементе всегда остается практически одинаковое количество места, которое я планирую скрыть переполнением.

любая помощьценится 

        <!doctype html>
        <html lang="en">
        <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

        <style>
        ul.blocks {
            list-style: none;
            padding: 0;
            margin: 0;
            /* width: 1000px; */
            overflow: hidden;
            height: 100px;            
        }
        ul.blocks li  {
            overflow: hidden;
            display: inline-block;
            width: 100px;
            height: 100px;            
            background-color: aliceblue;
            margin-right: 10px;
            opacity: 1;
            transition: opacity 1000ms ease-in-out;
        }    

        ul.blocks li span {
            font-size: 12px;
            line-height: 1.1;
        }

        ul.blocks li.disappear,
        ul.blocks li.new  {
            opacity: 0;
            transform: translateX(110px);
            transition: opacity 1000ms ease-in-out, transform 1000ms ease-in-out;
        }  
        </style>

        </head>



        <body>

        <button id="add">Add</button>

        <ul class="blocks"></ul>

        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

        <script>
        $(document).ready(function() {

            var blockWrapper = $("ul.blocks")
            var initialArray = [{number: 1, name: "mike"},{number: 2, name: "charles"}];
            var items        = []

            $.each(initialArray, function(i, item) {
                items.push('<li><div>#' + item.number + ' - <span> ' +item.name + '</span></div></li>');
            });

            blockWrapper.append( items.join('') );  

            $("#add").on('click', function(e) {
                e.preventDefault();
                $("ul.blocks li").last().fadeOut( 2000, function() {
                    $( this ).remove();
                });    
                blockWrapper.prepend('<li><div>#' + new Date() + ' - <span> ' +  new Date() + '</span></div></li>')
            })

        })
        </script>

        </body>
        </html>
...