在网站上查找动画代码

Question

我在主页上找到this网站打字机动画，但我似乎无法找到运行它的代码。无论如何都要跟踪网站上的动画，看看是什么让他们打勾？

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

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

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

Answer 1

当JavaScript代码更改元素时，您可以使用DOM断点暂停执行。在尝试理解动画或其他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来查看该组件是否是开源的。但是，在这种情况下，你运气不好。