带粒子动画的跳转按钮实现问题求助（附JS/CSS代码）

Hey there! I see you've got some awesome particle animations set up for your buttons—great work! Let's add the page navigation functionality while keeping those effects looking smooth. Here's how to do it:

核心思路 #

We want to make sure the particle disintegration animation plays fully before navigating to the new page, so users get to see the cool effect first. We'll use the existing complete callback of the particle animation to trigger the navigation once the effect finishes.

修改步骤 #

1. 定义目标URL: 先确定按钮要跳转的页面地址，可以是站内相对路径（比如"/next-project.html"）或者外部完整URL（比如"https://your-project-site.com"）。
2. 添加跳转标记: 点击主按钮时，设置一个标记，用来告诉动画完成后需要执行跳转。
3. 在动画完成回调中触发跳转: 粒子动画结束后，检查标记并执行页面跳转。

修改后的JS代码 #

这是更新后的JavaScript代码，已经加入了跳转逻辑：

(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'; 

        // 检查是否需要执行跳转
        if (window.shouldNavigateToNewPage) {
          // 替换成你的目标URL
          window.location.href = "https://your-target-page.com";
          // 清除标记，避免后续误触发跳转
          delete window.shouldNavigateToNewPage;
        }
      } 
    }; 

    const particles = new Particles(bttn, particlesOpts); 
    let buttonVisible = true; 

    bttn.addEventListener('click', () => { 
      if ( !particles.isAnimating() && buttonVisible ) { 
        particles.disintegrate(); 
        buttonVisible = !buttonVisible; 
        // 设置跳转标记
        window.shouldNavigateToNewPage = true;
      } 
    }); 

    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; 
      } 
    }); 
  }); 
})()

额外说明 #

• 如果不想等待动画完成: 要是你希望点击按钮后立刻跳转（哪怕动画没播放完），可以直接在bttn.addEventListener('click')的处理函数里，buttonVisible = !buttonVisible;后面加上window.location.href = "你的URL"。不过不太推荐这种方式，会浪费掉你精心做的粒子动画效果！
• URL使用提示: 站内页面用相对路径更方便，外部网站则需要写完整的URL地址。

内容的提问来源于stack exchange，提问作者vindicokimber