使用Glorious JavaScript库制作动画。

Question

我一直在尝试利用图书馆为学生制作素材。

我想制作动画，但我不明白如何使用或在哪里使用该库。我认为有必要从html文件中使用它。安装库，但当打开页面时，它只创建我放置的文本作为测试。

我正在使用WebStorm作为IDE，创建一个node.js项目。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="node_modules/@glorious/demo/dist/gdemo.min.css">
    <script src="node_modules/@glorious/demo/dist/gdemo.min.js"></script>
</head>
<body>

</body>
</html>

谁能指导我用什么程序或如何使用该库。这是我第一次尝试用JavaScript执行动画。

Answer 1

如果你是网络技术的新手，这里有一个很陡峭的曲线。就我个人而言，我会先退一步，熟悉一下工具。如果你有时间，可以看看 W3school的网站。有大量的信息可以让你快速的使用HTMLCSSJS。特别是关注于 CSS选择器和 Javascript 这样就更有意义了。

现在说说你问的问题。

首先，NodeJS不一定需要实现你的目标。你可以创建一个简单的HTML文件，直接从网上引用Glorious库。请看我在 <script> 和 <link> 下面的元素。

一旦你加载了库，你需要。

实例化库，并将其分配给一个变量，以便将来使用（参见 const demo = new GDemo(...))
告诉库你想让它在HTML中的什么地方渲染动画。在本例中，它是一个 <div/> 与 id='container'.
告诉库要渲染什么。这就是 gDemo.openApp(...) 部分。我直接从这个库的 GitHub 页面。

const gdemo = new GDemo('#container');

const code = 'console.log("Hello World!");'


gdemo
  .openApp('editor', {
    minHeight: '400px',
    windowTitle: 'demo.js'
  })
  .write(code, {
    onCompleteDelay: 2000
  })
  .openApp('terminal', {
    minHeight: '400px',
    promptString: '$'
  })
  .command('node ./demo')
  .respond('Hello World!')
  .command('')
  .end();

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

<head>
  <script src="https://cdn.jsdelivr.net/npm/@glorious/demo/dist/gdemo.min.js"></script>
  <link href="https://cdn.jsdelivr.net/npm/@glorious/demo/dist/gdemo.min.css" rel="stylesheet" />
</head>

<body>
  <div id="container"></div>
</body>

</html>

Answer 2

能否请你再详细说明一下问题。从你的例子来看，你只是创建了一个空页面。你想在你的页面中放入什么？表格？

另外我建议使用像Materials这样的框架 (https:/material.iocomponents。如果你正在从头开始一个Js项目，那么在React中，你可以使用React中的React库，除非你在这个库中有你真正想要显示的东西。

使用Glorious JavaScript库制作动画。

问题描述投票：0回答：2

2个回答

最新问题

使用Glorious JavaScript库制作动画。

问题描述 投票：0回答：2

2个回答

最新问题

问题描述投票：0回答：2