在网站上查找动画代码

Question

我在主页上的这个网站打字机动画上找到了，但我似乎找不到运行它的代码。有没有办法跟踪网站上的动画，看看是什么让它们打勾？

我使用 chrome 开发人员工具来查找 java 脚本文件，所以我可以阅读源代码，但我找不到它。

**这个函数给出了元素是否被动画但我需要如何**

if (!$(element).is(':animated')) {...}

Answer 1

您可以使用 DOM 断点在 JavaScript 代码更改元素时暂停执行。当试图理解为什么会发生动画或其他 DOM 更改时，这非常有用。

要创建 DOM 断点，请找到正在设置动画的元素，在检查器中右键单击它，选择“Break on”，然后选择“Subtree Modifications”。

Chrome 将在元素内容更新时暂停。

但是，在您的特定情况下，代码被缩小且不可读。

您可以使用 DevTools 美化代码，但它不会使它变得更容易，因为变量和函数名称仍然被缩小。

如果查看调用堆栈，您会发现页面的这一部分是一个 React 组件。因此，您可以尝试使用Chrome React DevTools来更好地理解该页面上的代码。

这告诉您有一个带有 afixedText和 a的组件typeingTextList。

您现在可以在 Chrome 中搜索页面的代码以找出该 React 组件的代码所在的位置。

您很幸运，您实际上可以找到该组件的原始（尽管已缩小）源代码DevsiteTypingEffect。

由于代码被缩小，我认为您无法得到更好的答案。

另一种策略是通过谷歌搜索DevsiteTypingEffect该组件是否是开源的。但是，在这种情况下，您不走运。