文章/答案/技术大牛

发布

社区首页 >问答首页 >当我使用npm安装popmotion(它用于动画)时，未登录类型错误

问当我使用npm安装popmotion(它用于动画)时，未登录类型错误
EN

Stack Overflow用户

提问于 2020-08-27 20:03:58

回答 1查看 353关注 0票数 0

当我使用它们提供的外部js文件链接时，没有出现错误，但是当我尝试使用包错误时，出现了错误。安装包裹后，我做了npm安装，然后我创建了localhost链接，但是它没有工作。控制台日志中有一个错误。错误是：

Uncaught TypeError: (0 , _popmotion.styler) is not a function
    at Object.parcelRequire.animation.js.popmotion (animation.js:5)
    at newRequire (animation.7bfd2d21.js:47)
    at animation.7bfd2d21.js:81
    at animation.7bfd2d21.js:120

js代码是

import {styler, spring, listen, pointer, value } from "popmotion";

const ball = document.querySelector('.box');
const divStyler = styler(ball);
const ballXY = value({ x: 0, y: 0 }, divStyler.set);

listen(ball, 'mousedown touchstart')
  .start((e) => {
    e.preventDefault();
    pointer(ballXY.get()).start(ballXY);
  });

listen(document, 'mouseup touchend')
  .start(() => {
    spring({
      from: ballXY.get(),
      velocity: ballXY.getVelocity(),
      to: { x: 0, y: 0 },
      stiffness: 200,
      // mass: 1,
      // damping: 10
    }).start(ballXY);
  });

而html代码是：

</!DOCTYPE html>
<html>
<head>
    <title>Animation</title>
    <link rel="stylesheet" type="text/css" href="./animation.css">
</head>
<body>

        <h1>Animation</h1>
        <div class="box"></div>
    
    <script type="text/javascript" src="./animation.js"></script>
</body>

此外，当我只是使用外部链接弹出运动，它工作得很好。下面是工作代码。

js代码是：

const { styler, spring, listen, pointer, value } = window.popmotion;

const ball = document.querySelector('.box');
const divStyler = styler(ball);
const ballXY = value({ x: 0, y: 0 }, divStyler.set);

listen(ball, 'mousedown touchstart')
  .start((e) => {
    e.preventDefault();
    pointer(ballXY.get()).start(ballXY);
  });

listen(document, 'mouseup touchend')
  .start(() => {
    spring({
      from: ballXY.get(),
      velocity: ballXY.getVelocity(),
      to: { x: 0, y: 0 },
      stiffness: 200,
      // mass: 1,
      // damping: 10
    }).start(ballXY);
  });

而html代码是：

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Animation</title>
  <link href="./animation.css" rel="stylesheet" type="text/css" />
</head>

<body>
  <h1>Animation</h1>
  <div class="box"></div>

  <script src="https://unpkg.com/popmotion@8.1.24/dist/popmotion.global.min.js"></script>
  <script src="./animation.js"></script>
</body>

</html>

流行网站：https://popmotion.io/pure/

注:这是我的第一个问题，我不知道是否需要提供任何补充资料。如果您需要更多的信息，请告诉我。谢谢。

A Noob

npm

typeerror

parcel

popmotion

javascript

回答 1

Stack Overflow用户

发布于 2021-04-22 07:12:27

您使用的是popmotion 8风格。您可以卸载当前的popmotion及其依赖项(特别是styler)，然后安装poption v8。您可以尝试popmotionv8.1.24

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/63623432

复制

相似问题

问当我使用npm安装popmotion(它用于动画)时，未登录类型错误
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问当我使用npm安装popmotion(它用于动画)时，未登录类型错误EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问当我使用npm安装popmotion(它用于动画)时，未登录类型错误
EN