0

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

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

При клике на должен появляться один из блоков 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);
    }
}
2
  • Первичное состояние какое? Куда надо кликнуть? Почему появиться должен случайный, а удалиться первый?
    – SwaD
    24 сен 2022 в 18:41
  • Не правильно написал, Должно срабатывать по порядку. Первый клик появляется первый particle__box второй клик удаляется Первый particle__box и появляется второй particle__box. Первичное состояние должно быть disable то есть то есть анимация не должна проигрываться пока пользователь не сделает клик по <div id="big-btn" ></div> 24 сен 2022 в 18:47

1 ответ 1

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()">

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.