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 that you have read and understand our privacy policy and code of conduct.

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