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

答案 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
}