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

时间:2018-05-18 11:03:45

标签: javascript animation button

我试图为按钮设置动画但是我希望它重定向到新页面,这样我就可以开始对项目进行更多编码了。我是一名初级开发人员,因此我的代码可能会出现严重错误。

下面的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;
}




1 个答案:

答案 0 :(得分:0)

当你创建一个新类Particles时,你应该传递带有"完成"属性的对象选项。并且作为值设置回调函数。如果bttn是一个像" .myclass"的选择器。将是:

<popup-info img="img/alt.png" text="Your card validation code (CVC)
is an extra security feature — it is the last 3 or 4 numbers on the
back of your card.">

或:

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
}