Next.js 14中Anime.js动画无法运行问题求助

核心问题：配置项拼写错误 #

你的代码里Anime.js配置对象的属性名写错了——tergets应该是targets，这个拼写错误会导致Anime.js无法识别目标元素，自然不会执行动画，而且因为是无效属性，控制台不会抛出报错。

修正后的代码 #

'use client'

import anime from 'animejs/lib/anime.es.js'
import { useEffect, useRef } from 'react'

export default function RootPage() {
  const divRef = useRef(null)

  useEffect(() => {
    anime({
      targets: divRef.current, // 修正拼写错误
      translateX: 100,
      direction: 'alternate',
      loop: true
    })
  }, [])

  return <div ref={divRef} style={{
    backgroundColor: '#000000',
    borderRadius: '9999px',
    height: '2rem',
    left: '1rem',
    position: 'absolute',
    top: '1rem',
    width: '2rem'
  }}></div>
}

额外检查点 #

• 确保已经通过npm install animejs或yarn add animejs正确安装了Anime.js依赖
• 确认导入路径animejs/lib/anime.es.js对应你安装的Anime.js版本，部分版本可以直接用import anime from 'animejs'

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