Как добавлять и удалять div по клику

Question

подскажите как можно реализовать данную анимацию по клику.

В чем заключается суть

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

HTML

                    <div class="particle__box" style="transform: rotate(115.872deg);">
                        <div class="particle" data-deg="0"></div>
                    </div>
                    <div class="particle__box" style="transform: rotate(190.065deg);">
                        <div class="particle" data-deg="0"></div>
                    </div>
                    <div class="particle__box" style="transform: rotate(212.398deg);">
                        <div class="particle" data-deg="0"></div>
                    </div>
                    <div class="particle__box" style="transform: rotate(153.107deg);">
                        <div class="particle" data-deg="0"></div>
                    </div>
                    <div class="particle__box" style="transform: rotate(86.0031deg);">
                        <div class="particle" data-deg="0"></div>
                    </div>
                    <div class="particle__box" style="transform: rotate(80.3415deg);">
                        <div class="particle" data-deg="0"></div>
                    </div>
                    <div class="particle__box" style="transform: rotate(291.074deg);">
                        <div class="particle" data-deg="0"></div>
                    </div>
                    <div class="particle__box" style="transform: rotate(301.231deg);">
                        <div class="particle" data-deg="0"></div>
                    </div>
                    <div class="particle__box" style="transform: rotate(343.08deg);">
                        <div class="particle" data-deg="0"></div>
                    </div>
                    <div class="particle__box" style="transform: rotate(284.42deg);">
                        <div class="particle" data-deg="0"></div>
                    </div>

CSS

.particle__box {
    left: 50%;
    position: absolute;
    top: 50%;
}
.particle {
    -webkit-animation: particle_anim 1s backwards;
    animation: particle_anim 1s backwards;
    background: #fff;
    border-radius: 100%;
    height: 12px;
    width: 12px;
    z-index: 2;
}
@keyframes particle_anim {
    0% {
        opacity: 1;
        -webkit-transform: translate(2vmin,2vmin) scale(1);
        transform: translate(2vmin,2vmin) scale(1);
    }
    100% {
        opacity: 0;
        -webkit-transform: translate(35vmin,35vmin) scale(0);
        transform: translate(35vmin,35vmin) scale(0);
    }
}

Answer 1

Можно попробовать так. Добавляем класс в стили

.visible {
    display: block !important;
}

Меняем стиль

.particle__box {
    left: 50%;
    position: absolute;
    top: 50%;
    display: none;
}

В JS скрипт добавляем

let divs;
let btn;
let current = 0;
let visible = false;
function load() {
    divs = document.getElementsByClassName('particle__box');
    btn = document.getElementById('big-btn');
    btn.addEventListener('click', function () {
        if (!visible) {
            divs[current].classList.add('visible');
            visible = true;
        } else {
            divs[current].classList.remove('visible');
            if (current < divs.length -1 ) {
                current++;
            } else {
                current = 0;
            }
            visible = false;
        }
    })
}

И добавляем в тег <body>

<body onload="load()">

БЛОГ НА HUSL

Как добавлять и удалять div по клику

Ответы (1 шт):