Angular 4中实现点击箭头跳转至下一节的动态动画方案

嘿，我来帮你搞定这个需求！你之前尝试用animate结合transform: translate3d的思路是对的，但问题出在错误地用了opacity作为动画驱动属性——opacity的取值范围是0-1，完全没法对应到像素级的滚动距离。下面给你两种靠谱的实现方案，都是基于修改translate3d的Y轴值来实现平滑滚动：

方案一：修正jQuery动画写法 #

这种方案适合已经在用jQuery的项目，核心是用一个自定义数值变量来驱动动画，在step回调里把数值同步到transform属性上：

function moveToNextSection() {
  const $scrollContainer = $('.bfs-scroll-container');
  const viewportHeight = 949; // 你已经动态计算好的视口高度，建议换成window.innerHeight适配不同设备

  // 先获取容器当前的translateY偏移值
  const currentTransform = $scrollContainer.css('transform');
  let currentYOffset = 0;
  if (currentTransform !== 'none') {
    // 解析matrix/matrix3d字符串，提取Y轴偏移
    const matrixValues = currentTransform.match(/matrix(3d)?\((.+)\)/)[2].split(', ');
    currentYOffset = parseInt(matrixValues[matrixValues.length - 2], 10);
  }

  // 计算目标偏移：下一节需要让容器向上移动一个视口高度（所以Y值是负数，根据你的布局调整正负）
  const targetYOffset = currentYOffset - viewportHeight;

  // 用自定义的y变量做动画，step回调更新transform
  $({ currentY: currentYOffset }).animate({ currentY: targetYOffset }, {
    duration: 800, // 动画时长，可按需调整
    easing: 'swing', // 缓动效果，也可以用'linear'
    step: function(now) {
      $scrollContainer.css('transform', `translate3d(0, ${now}px, 0)`);
    }
  });
}

方案二：原生JS + requestAnimationFrame（更流畅） #

如果你的项目更偏向原生JS，这种方案性能更好，动画更丝滑，还能自定义缓动效果：

function moveToNextSection() {
  const scrollContainer = document.querySelector('.bfs-scroll-container');
  const viewportHeight = 949; // 建议替换为window.innerHeight实现自适应

  // 获取当前容器的Y轴偏移
  const computedStyle = getComputedStyle(scrollContainer);
  const transformMatrix = new DOMMatrix(computedStyle.transform);
  let currentYOffset = transformMatrix.m42; // DOMMatrix直接获取Y轴偏移

  // 目标偏移值
  const targetYOffset = currentYOffset - viewportHeight;
  const animationDuration = 800; // 动画时长
  const startTime = performance.now();

  // 动画循环函数
  function animateScroll(currentTime) {
    const elapsedTime = currentTime - startTime;
    const progress = Math.min(elapsedTime / animationDuration, 1);

    // 自定义缓动函数（这里用ease-in-out，可替换成其他公式）
    const easedProgress = progress < 0.5 
      ? 2 * progress * progress 
      : 1 - Math.pow(-2 * progress + 2, 2) / 2;

    // 计算当前要应用的偏移值
    const currentOffset = currentYOffset + (targetYOffset - currentYOffset) * easedProgress;
    scrollContainer.style.transform = `translate3d(0, ${currentOffset}px, 0)`;

    // 未完成动画就继续循环
    if (progress < 1) {
      requestAnimationFrame(animateScroll);
    }
  }

  // 启动动画
  requestAnimationFrame(animateScroll);
}

关键注意事项 #

• 方向调整：如果你的布局是容器向下滚动显示下一节，可能需要把targetYOffset改成currentYOffset + viewportHeight，根据实际页面结构调整正负。
• 动态视口高度：建议把固定的949px换成window.innerHeight，这样能适配不同屏幕尺寸的设备。
• GPU加速：用translate3d而不是translateY可以触发GPU加速，让滚动动画更流畅，避免卡顿。

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