Swup页面切换后anime.js动画无法重载的技术求助

问题根源 #

Swup 3完成页面切换时仅替换指定容器内的内容，首次页面加载时嵌入的anime.js动画代码不会自动在新页面加载后重新运行——因为这些代码只在初始页面渲染时执行过一次。

解决思路 #

借助Swup的事件系统，监听**contentReplaced**事件（该事件在页面切换事务完成、新内容渲染完毕后触发），在事件回调中重新初始化anime.js动画。

具体实现步骤 #

1. 封装动画逻辑为可复用函数
   将你的anime.js动画代码抽成独立函数，方便重复调用：

   function initAnimeAnimations() {
     // 替换成你实际的anime.js动画代码
     anime({
       targets: '.animation-target',
       opacity: [0, 1],
       translateY: [20, 0],
       duration: 800,
       easing: 'easeOutQuad',
       delay: anime.stagger(100)
     });
   }
   

2. 绑定Swup事件并初始化动画
   初始化Swup实例后，监听contentReplaced事件，同时确保首次页面加载时也执行一次动画函数：

   // 初始化Swup
   const swup = new Swup();
   
   // 页面切换完成后重新执行动画
   swup.on('contentReplaced', initAnimeAnimations);
   
   // 首次加载页面时执行动画
   initAnimeAnimations();
   

注意事项 #

• 确保新页面中存在动画目标元素，否则anime.js不会执行任何操作；
• 若不同页面需要不同动画逻辑，可在initAnimeAnimations函数中通过当前URL、页面专属类名做分支判断；
• 避免重复初始化Swup实例，确保事件监听只绑定一次。

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