anime()anime()前,或用
document.addEventListener('DOMContentLoaded', ...)targets: '.box'要求页面里真有
class="box";
targets: '#myId'要求存在对应 id;
targets: 'div'会匹配所有 div —— 容易误触 若用变量传入,必须是 DOM 元素或 NodeList(比如
document.querySelectorAll('.item')),不能是字符串 opacity、translateX 这些属性动不了?确认 CSS 初始值和单位 CSS 属性动画依赖浏览器能否解析起始/结束值。Anime.js 不自动补单位,也不强制重绘触发,很多“不动”其实是值无效或被覆盖。
opacity: 0→
opacity: 1没问题;但
opacity: [0, '1']会失败,数组里类型要一致
translateX: 50是 50px,不是 50%;要百分比得写
translateX: '50%'颜色动画如
backgroundColor: '#ff0000'→
'#0000ff'可行,但
background: 'red'→
'blue'不行(命名色不支持插值) 如果元素本身
display: none或父级
overflow: hidden裁掉区域,动画可能“看不见”,但其实已执行 动画太快、不循环、或 easing 没效果?看 duration、loop 和 easing 参数组合 默认
duration是 1000ms,但很多人删了它又没设,结果用默认值;
loop默认是
false,不写就只播一次;
easing写错名也不会报错,只是退回 linear。 php版微信js-sdk支付接口类 php版微信js-sdk支付接口类 下载 立即学习 “ 前端免费学习笔记(深入) ”;
duration: 300才是 300ms,写成
3000就是 3 秒 —— 单位是毫秒,不是秒
loop: true无限循环;
loop: 3循环 3 次(含首次);
direction: 'alternate'配合 loop 才能来回动 内置 easing 名必须严格匹配,比如
'easeInOutSine'、
'easeOutExpo';写成
'ease-inside-sine'或漏大小写就无效 想让动画延迟开始?加
delay: 200(毫秒),不是
startDelay或
wait多个元素一起动却不同步?用 stagger() 控制交错时机 对列表项逐个动画时,直接写
targets: '.item'会让所有元素同一时刻开始。要实现“波浪式”入场,必须用
stagger。
delay: anime.stagger(100)表示每个元素比前一个晚 100ms 启动
delay: anime.stagger(150, {from: 'last'})从最后一个元素开始倒序延迟
delay: anime.stagger(80, {grid: [4, 5], axis: 'y'})在 4×5 网格中按列延迟(适合卡片墙) 注意:
stagger只作用于
delay,不是自动加到 duration 上;别把它和
duration
混用
最常被忽略的是:Anime.js 不接管 CSS 动画层叠逻辑,也不修正 z-index 或 pointer-events 的副作用。动完之后元素还在原位置占流,但视觉上可能被遮挡或点不中 —— 这类问题不会报错,得自己 inspect 元素状态看 computed style。
相关文章