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>但是“悬停我”中没有显示动画！文字。

我在做什么错？还是有更简单的方法来合并这些代码？

我尝试过的其他事情：

最后，我通过完成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

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

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

编辑：实际上，该脚本适用于AngularJS，它不能与Angular一起使用。

在角度分量中使用velocity.js

1 个答案: