基于下一节父元素方向实现当前与下一节元素动画效果

需求背景 #

我有一组包含背景图片容器（.image）和切换按钮（.next）的section组件，切换规则如下：

• 父元素规则：当前显示在屏幕上的section为「上一节」，section的class（from-down/from-right/from-up/from-left）标识下一节进入屏幕的方向；点击上一节的.next按钮时，下一节从对应方向进入屏幕，上一节向相反方向退出。例如下一节class为from-down时，下一节从top:120%移动到top:0，上一节动画到top:-120%。
• 内容动画规则：section移动时，内部.image需要实现视差效果；激活状态的.image为绝对定位，初始值为top:50%、left:50%并通过translate(-50%, -50%)居中；section切换时，.image随父元素方向移动：例如下一节为from-down时，上一节的.image从top:50%移动到top:-50%，下一节的.image从top:150%移动到top:50%。

HTML结构（给当前激活section添加active类，方便定位）：

<section class="from-down scene1 active">
    <div class="image"></div>
    <div class="next"></div>
</section>
<section class="from-right scene2">
    <div class="image"></div>
    <div class="next"></div>
</section>
<section class="from-down scene3">
    <div class="image"></div>
    <div class="next"></div>
</section>
<section class="from-down scene4">
    <div class="image"></div>
    <div class="next"></div>
</section>
<!-- 更多section... -->

原代码问题分析 #

原代码无法正常工作，核心问题包括：

1. 元素定位错误：
   • $(this).next('section .image')：.next()仅查找同级下一个元素，section是当前section的同级，不是.next按钮的同级，无法正确获取下一节。
   • $(this).closest('.image')：.closest()向上查找祖先元素，.image是.next的兄弟元素，此写法无法定位到目标图片容器。
2. 判断逻辑失效：if (nextImage.parent('.from-down'))永远为真，因为jQuery对象即使无匹配元素也会返回对象，需用.hasClass()或.length判断。
3. 重复代码冗余：每个方向的动画逻辑高度重复，维护成本高。

修正并简化后的代码 #

// 定义方向与动画参数的映射表，统一管理各方向的动画规则
const directionAnimMap = {
    'from-down': {
        currentSection: { top: '-120%' },
        currentImage: { top: '-50%', left: '50%' },
        nextSection: { top: '0' },
        nextImage: { top: '50%', left: '50%' },
        nextImageInit: { top: '150%', left: '50%' }
    },
    'from-right': {
        currentSection: { left: '-120%' },
        currentImage: { top: '50%', left: '-50%' },
        nextSection: { left: '0' },
        nextImage: { top: '50%', left: '50%' },
        nextImageInit: { top: '50%', left: '150%' }
    },
    'from-up': {
        currentSection: { top: '120%' },
        currentImage: { top: '150%', left: '50%' },
        nextSection: { top: '0' },
        nextImage: { top: '50%', left: '50%' },
        nextImageInit: { top: '-50%', left: '50%' }
    },
    'from-left': {
        currentSection: { left: '120%' },
        currentImage: { top: '50%', left: '150%' },
        nextSection: { left: '0' },
        nextImage: { top: '50%', left: '50%' },
        nextImageInit: { top: '50%', left: '-50%' }
    }
};

$('.next').click(function() {
    // 获取当前激活的section及内部图片
    const $currentSection = $(this).closest('section');
    const $currentImage = $currentSection.find('.image');
    
    // 获取下一节及内部图片，无下一节则终止
    const $nextSection = $currentSection.next('section');
    if (!$nextSection.length) return;
    const $nextImage = $nextSection.find('.image');

    // 匹配下一节的进入方向
    const direction = Object.keys(directionAnimMap).find(dir => $nextSection.hasClass(dir));
    if (!direction) return;

    // 从映射表取出对应动画参数
    const animParams = directionAnimMap[direction];

    // 初始化下一节和图片的起始位置
    $nextSection.css({ position: 'absolute' }).css(
        animParams.nextSection.top === '0' ? { top: '120%', left: '0' } : { left: '120%', top: '0' }
    );
    $nextImage.css(animParams.nextImageInit);

    // 同步执行所有动画
    $currentSection.delay(300).animate(animParams.currentSection, 5000, 'easeInOutQuart');
    $currentImage.delay(300).animate(animParams.currentImage, 5000, 'easeInOutQuart');
    $nextSection.delay(300).animate(animParams.nextSection, 5000, 'easeInOutQuart');
    $nextImage.delay(300).animate(animParams.nextImage, 5000, 'easeInOutQuart');

    // 更新激活状态
    $currentSection.removeClass('active');
    $nextSection.addClass('active');
});

代码说明 #

1. 映射表优化：用directionAnimMap集中管理各方向的动画参数，替代冗余的if-else判断，新增方向只需扩展映射表即可。
2. 元素定位修正：使用closest('section')、next('section')、find('.image')正确定位目标元素，解决原代码的定位错误。
3. 健壮性提升：判断下一节是否存在、是否匹配方向类，避免无效动画执行。
4. 完整动画实现：补充了section本身的切换动画，同时实现.image的视差效果，完全符合需求。
5. 状态管理：通过active类标记当前显示的section，方便后续样式或逻辑扩展。

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