Как можно красиво убирать элемент списка со страницы?

Question

[Soft_touch_plastic]

Здравствуйте, на сайте находится верстка блока уведомлений, фиксировано в левом нижнем углу. По нажатию элемент удаляется. Можно ли как-нибудь сделать так, чтобы при нажатии верхний элемент занимал место удаляемого, а удаляемый уезжал влево и пропадал? Если у удаляемого элемента просто убирать margin и padding, чтобы он ужимался, то у него все равно есть высота, и при его удалении элементы выше дергаются вниз. Есть ли возможность сделать плавно?
Примерно так выглядит блок:

<div class="notice-container">
    <div class="notice">text</div>
    <div class="notice">text</div>
    <div class="notice">text</div>
    <div class="notice">text</div>
</div>

Comments

[Roman]

Это попробуй:

// .notice { position: relative }

        const removeDelay = 300;
        const noticeContainer = document.querySelector('.notice-container');
    
        noticeContainer?.querySelectorAll('.notice').forEach((el, i) => {
            
            el.addEventListener('click', (e) => {
                const first = noticeContainer.querySelector('.notice');
                e.target.after(first);
                e.target.animate([
                    { // from
                        opacity: 1,
                        left: 0
                    },
                    { // to
                        opacity: 0,
                        left: `${e.target.offsetWidth}px`
                    }
                ], removeDelay);

                setTimeout(() => {
                    e.target.remove();
                }, removeDelay);
                
            }, false)

        });

[Soft_touch_plastic]

Roman, не работает

[Roman]

Soft_touch_plastic, может вызвать в window.addEventListener('load', () => { // code here. }, false);

Answer 1

[Philipp]

https://developer.mozilla.org/en-US/docs/Web/CSS/t...
https://developer.mozilla.org/en-US/docs/Web/CSS/a...

Comments

[Soft_touch_plastic]

Ты бы не писал, если не знаешь. При трансформации элемента физически он все еще находится на старом месте, следовательно никуда его верхние сиблинги двигаться не будут. Чем такое скидывать, лучше бы посоветовал решение или ничего не писал

[Philipp]

Подавись

[Soft_touch_plastic]

Philipp, Я об этом и написал, что в конце объект заметно дергается. То, чем ты меня попросил подавиться, я сделал сам, а людей лишь попросил идею как убрать подергивание в конце. Читай, пожалуйста, внимательнее в следующий раз.