Кнопка анимации JavaScript для перенаправления на новую страницу

Question

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

Js Код ниже:

(function() {

const arrOpts = [
    {},
    {
        type: 'triangle',
        easing: 'easeOutQuart',
        size: 6,
        particlesAmountCoefficient: 4,
        oscillationCoefficient: 2
    },
    {
        type: 'rectangle',
        duration: 500,
        easing: 'easeOutQuad',
        color: '#091388',
        direction: 'top',
        size: 8
    },
    {
        direction: 'right',
        size: 4,
        speed: 1,
        color: '#e85577',
        particlesAmountCoefficient: 1.5,
        oscillationCoefficient: 1
    },
    {
        duration: 1300,
        easing: 'easeInExpo',
        size: 3,
        speed: 1,
        particlesAmountCoefficient: 10,
        oscillationCoefficient: 1
    },
    {
        direction: 'bottom',
        duration: 1000,
        easing: 'easeInExpo',
    },
    {
        type: 'rectangle',
        style: 'stroke',
        size: 15,
        color: '#e87084',
        duration: 600,
        easing: [0.2,1,0.7,1],
        oscillationCoefficient: 5,
        particlesAmountCoefficient: 2,
        direction: 'right'
    },
    {
        type: 'triangle',
        style: 'stroke',
        direction: 'top',
        size: 5,
        color: 'blue',
        duration: 1400,
        speed: 1.5,
        oscillationCoefficient: 15,
        direction: 'right'
    },
    {
        duration: 500,
        easing: 'easeOutQuad',
        speed: .1,
        particlesAmountCoefficient: 10,
        oscillationCoefficient: 80
    },
    {
        direction: 'right',
        size: 4,
        color: '#969696',
        duration: 1200,
        easing: 'easeInCubic',
        particlesAmountCoefficient: 8,
        speed: 0.4,
        oscillationCoefficient: 1
    },
    {
        style: 'stroke',
        color: '#1b81ea',
        direction: 'bottom',
        duration: 1200,
        easing: 'easeOutSine',
        speed: .7,
        oscillationCoefficient: 5
    },
    {
        type: 'triangle',
        easing: 'easeOutSine',
        size: 3,
        duration: 800,
        particlesAmountCoefficient: 7,
        speed: 3,
        oscillationCoefficient: 1
    }
];

const items = document.querySelectorAll('.grid__item');
items.forEach((el, pos) => {
    const bttn = el.querySelector('button.particles-button');
    const bttnBack = el.querySelector('button.action');

    let particlesOpts = arrOpts[pos];
    particlesOpts.complete = () => {
        if ( !buttonVisible ) {
            anime.remove(bttnBack);
            anime({
                targets: bttnBack,
                duration: 300,
                easing: 'easeOutQuint',
                opacity: 1,
                scale: [0,1]
            });
            bttnBack.style.pointerEvents = 'auto';
        }
    };
    const particles = new Particles(bttn, particlesOpts);

    let buttonVisible = true;
    bttn.addEventListener('click', () => {
        if ( !particles.isAnimating() && buttonVisible ) {
            particles.disintegrate();
            buttonVisible = !buttonVisible;
        }
    });
    bttnBack.addEventListener('click', () => {
        if ( !particles.isAnimating() && !buttonVisible ) {
            anime.remove(bttnBack);
            anime({
                targets: bttnBack,
                duration: 300,
                easing: 'easeOutQuint',
                opacity: 0,
                scale: 0
            });
            bttnBack.style.pointerEvents = 'none';

            particles.integrate({
                duration: 800,
                easing: 'easeOutSine'
            });
            buttonVisible = !buttonVisible;
        }
    });
});
})()

Код CSS ниже:

.particles {
    position: relative;
    grid-area: 1 / 1 / 2 / 2;
}

.particles-canvas {
    position: absolute;
    pointer-events: none;
    top: 50%;
    left: 50%;
    transform: translate3d(-50%,-50%,0);
}

.particles-wrapper {
    position: relative;
    display: inline-block;
   overflow: hidden;
}

.particles-button {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    position: relative;
    border-radius: 5px;
    border-radius: var(--radius-button);
    background: var(--color-button-bg);
    color: var(--color-button-text);
    border: 0;
    border: var(--border-button);
    margin: 0;
    padding: 1.5rem 3rem;
    padding: var(--button-padding);
}

.particles-button:focus {
    outline: none;
}

.no-js .particles-button {
    grid-area: 1 / 1 / 2 / 2;
}

Answer 1

Когда вы создаете новый класс Particles, вы должны передать объектную опцию со свойством «complete» и в качестве значения установить функцию обратного вызова.Если bttn является селектором, например ".myclass" будет:

var particles = new Particles(bttn,{complete:function(){
                                    //do whatever E.g. redirect
                                    location.href="http://www.example.com";
                                   }});

или:

function someBehavior(){
location.href="http://www.example.com";//redirect
}

, а затем:

var particles = new Particles(bttn,{complete:someBehavior});