js 时间轴

// 创建一个简单的时间轴动画效果

// 获取 DOM 元素
const timeline = document.querySelector('.timeline');
const items = timeline.querySelectorAll('.timeline-item');

// 设置时间轴的动画效果
function animateTimeline() {
  const tl = new TimelineLite();

  // 循环每个时间轴项目并添加动画
  items.forEach((item, index) => {
    tl.from(item, {
      duration: 1,
      opacity: 0,
      y: 50,
      ease: Power2.easeInOut,
      delay: index * 0.3
    });
  });
}

// 当页面加载完成时启动动画
window.addEventListener('load', animateTimeline);

// 解释说明：
// 1. `timeline` 和 `items` 分别获取了时间轴容器和其中的每个项目。
// 2. `animateTimeline` 函数使用 GSAP (GreenSock Animation Platform) 创建了一个时间轴动画。
// 3. 使用 `from` 方法为每个时间轴项目设置了初始状态（透明度为 0，垂直位移 50 像素），然后逐渐过渡到正常显示状态。
// 4. 每个项目之间的动画延迟通过 `index * 0.3` 实现，确保它们依次出现。
// 5. 页面加载完成后触发动画。

// 注意：此代码示例依赖于 GSAP 库，请确保在项目中引入了 GSAP。