菜鸟教程

主题

复杂入场动画 ​

在页面首次加载、组件切换或弹窗显示时，通常会用到 复杂入场动画。通过 Anime.js 的 timeline、stagger、transform 等功能，我们可以构建顺序、层级、多重效果的入场过渡。

动画组合技巧 ​

  • translateX / Y: 平移入场
  • opacity: 淡入
  • scale: 缩放弹出
  • delay 或 anime.stagger: 顺序错位播放
  • timeline: 多动画流程组合

示例：卡片元素依次弹入 ​

js
anime({
  targets: ".item",
  translateY: [50, 0],
  opacity: [0, 1],
  scale: [0.8, 1],
  delay: anime.stagger(150),
  duration: 800,
  easing: "easeOutBack",
});

小结 ​

结合多个属性和时间控制，Anime.js 能帮助你快速实现复杂而自然的入场动画，常用于页面主视觉、组件过渡等。

示例演示 ​

示例无法以 iframe 加载（请检查路径或将 demo 放到 public/）。

✅ 效果说明：

  • 点击按钮，多个 .item 方块依次从底部浮现 + 缩放 + 淡入；
  • 动画具有层次感和错位感，模拟复杂入场行为；
  • 常用于首页 Hero、模块化组件切换等场景。