在角度组件中使用velocity.js

Question

我正在尝试创建一个实现this codepen script 的角度组件。

我使用 ng g component <my-comp-name> 创建了组件，因此我的组件中有 3 个 HTML、CSS 和 ts 文件。

我刚刚复制粘贴的 HTML 和 CSS 部分。 JS部分一直是合并的难点。主要是因为我有这个速度函数。

我尝试了以下link。我使用了npm install angular-velocity --save，并在组件HTML中添加了<script src="node_modules/angular-velocity/angular-velocity.min.js"></script>。

我试着看看这是否能改变以下行：

<div ng-view class="velocity-opposites-transition-slideUpIn hover-notify">Hover Me!</div> 但是 Hover me 中没有显示动画！文本。

我做错了什么？或者有没有更简单的方法来合并这些代码？

---

我尝试了更多的东西：

最后，我通过 import * as $ from "jquery"; 成功使用了 jQuery 部分，我尝试了类似的方法，但所有变体都失败了：import {Velocity} from 'velocity-animate';

有了这个link，我使用了：import {Velocity} from 'velocity-animate';，然后将$(".hex-wrap").velocity("callout.pulse"); 替换为Velocity(document.getElementsByClassName("hex-wrap"), "callout.pulse");，但什么也没有。

请！我基本上只是希望能够使用$(<sth>).velocity(...);。我知道我是一个新手，但这有多难？

---

我通过 hack 解决了我的问题（我仍在寻找如何在角度中使用速度） 我做了一些“解决”问题的事情。

我用直接从网页下载的 JS 做了import 'src/app/languages/computer/script.js';，在 HTML 文件的末尾我还添加了它作为带有<script src="'src/app/languages/computer/script.js'"></script> 的脚本。

css 文件中存在问题。我改变了：

.code-description * {
display: none;
}

为

div[class$="-desc"] {
  display: none;
}

所以我在技术上让它与 JavaScript 一起工作，而不是使用我的组件 ts。

Answer 1

您可以尝试在angular.json 的脚本部分添加node_modules/angular-velocity/angular-velocity.min.js：

"scripts": [
  "node_modules/angular-velocity/angular-velocity.min.js"
]

编辑：实际上这个脚本是为 AngularJS 编写的，它不能与 Angular 一起使用。