fullpage.js实现章节滚动时销毁特效动画的可行性咨询

实现可行性及方案 #

完全可以实现，fullpage.js内置的生命周期回调可以完美支撑这类章节切换时的销毁/入场动画需求，具体实现逻辑如下：

• 核心依赖fullpage.js提供的onLeave回调，该回调会在当前章节开始切换到下一章节前触发，是执行销毁动画的最佳时机
• 你可以自定义任意形式的销毁动效：无论是CSS实现的渐隐、缩放、裁剪碎裂效果，还是JS动画库实现的复杂动效、甚至Canvas/Three.js实现的粒子消散类3D效果，都可以在该回调内触发执行
• 注意将scrollingSpeed配置项的数值设置为略大于销毁动画的总时长，避免动画还未播放完成就触发了章节切换，导致动效被截断
• 切换完成后可以在afterLoad回调内清理前一章节的动效类名，保证后续切回该章节时能正常展示

基础实现代码示例

fullpage.js初始化配置：

new fullpage('#fullpage', {
  sectionsColor: ['#ff5f45', '#0798ec', '#fc6c7c'],
  // 滚动切换总时长设置为1000ms，比销毁动画的800ms长，保证动效播放完整
  scrollingSpeed: 1000,
  // 离开当前章节前触发，执行销毁动画
  onLeave: function(origin, destination, direction) {
    origin.item.classList.add('section--destroy')
  },
  // 新章节加载完成后触发，清理旧章节动效类、添加新章节入场动效
  afterLoad: function(origin, destination, direction) {
    if(origin) origin.item.classList.remove('section--destroy')
    destination.item.classList.add('section--enter')
    // 入场动画播放完成后清理入场类
    setTimeout(() => {
      destination.item.classList.remove('section--enter')
    }, 800)
  }
})

对应动效CSS：

/* 销毁动效示例：缩放+下沉+淡出 */
.section--destroy {
  opacity: 0;
  transform: scale(0.92) translateY(40px);
  transition: all 0.8s cubic-bezier(0.645, 0.045, 0.355, 1);
  pointer-events: none;
}

/* 入场动效示例：上移+淡入 */
.section--enter {
  opacity: 0;
  transform: translateY(-40px);
  transition: all 0.8s cubic-bezier(0.645, 0.045, 0.355, 1);
}

如果需要实现更细腻的分层销毁效果，只需要给章节内不同层级的子元素单独设置不同的动效类和延迟时间即可，逻辑和上述方案完全一致。

内容的提问来源于stack exchange，提问作者Sam K.