javascript - 在网站上查找动画代码

Question

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

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

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

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

Answer 1

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

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

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

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

您可以 prettify the code with DevTools , 但它不会使它变得更容易，因为变量和函数名称仍然被缩小。

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

这告诉您有一个组件采用 fixedText 和 typeingTextList。

您现在可以 search the page's code in Chrome找出那个 React 组件的代码在哪里。

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

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

另一种策略是在谷歌上搜索 DevsiteTypingEffect 以查看该组件是否开源。但是，在这种情况下你就不走运了。