0

当我使用他们提供的popmotion的外部js文件链接时没有错误，但是当我尝试使用包裹时发生错误。安装 parcel 后，我做了 npm install popmotion 然后我创建了 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>

此外，当我只是使用外部链接进行 popmotion 时，它工作得很好。下面是工作代码。

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>

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

注意：这是我的第一个问题，我不确定是否需要提供任何其他信息。如果您需要更多信息，请告诉我。谢谢。

  • 一个菜鸟
4

1 回答 1

0

您使用 popmotion 版本 8 样式。您可以卸载当前的 popmotion 包及其依赖项（尤其是 styler），然后安装 poption v8。你可以试试popmotion v8.1.24

于 2021-04-22T07:12:27.013 回答