JavaScript动画按钮重定向到新页面

Question

I'm trying to animate a button however I want it to redirect to a new page so I can start coding the project a bit more. I'm a junior developer so my code may be drastically wrong.

Js Code Below:

(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 Code Below :

 .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

When you create a new class Particles, you should pass the object option with the property "complete" and as a value set a callback function. If bttn is a selector like ".myclass" would be:

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

or:

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

and then:

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