Anime.JS EL 错误：无法读取未定义的属性“parentNode”

编程问答 2022-05-29

问题描述

在 React 中尝试使用anime.js 库在路径上设置动画时出现以下错误：

TypeError: Cannot read property 'parentNode' of undefined

在这种情况下未定义是anime.js（一个外部库）中的这一行，所以el是未定义的。

var parentEl = el.parentNode;

我在我的组件中使用以下内容定义了一个 React Hook：

  const animationRef = React.useRef(null);
  let planePath = anime.path('.plane-path path');

  React.useEffect(() => {
    animationRef.current = anime({
      targets: "#plane .el",translateX: planePath('x'),translateY: planePath('y'),duration: 5000,easing: "easeInOutSine"
    });
  },[]);

我的组件中的 HTML 如下所示：

<svg className="plane-path" width="1000" height="500"> 
  <path stroke="red" fill="none" d="M 100 300 Q 150 150 250 300 C 300 350 550 500 700 300"></path>
</svg>
<img src={require('../../assets/img/plane.png')} id="plane"/>

本质上，我的目标是让图像“平面”在由平面路径定义的曲线上设置动画。

感谢您的帮助！

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

animationanimationanimationanime.jsjavascriptjqueryreactjsreactjsreactjsreactjs