复杂入场动画

在页面首次加载、组件切换或弹窗显示时，通常会用到 复杂入场动画。通过 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 能帮助你快速实现复杂而自然的入场动画，常用于页面主视觉、组件过渡等。

示例演示

loading

✅ 效果说明：

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