在网站上查找动画代码答案

【问题标题】：Finding animation code on website在网站上查找动画代码
【发布时间】：2016-05-31 20:40:24
【问题描述】：

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

我使用 chrome 开发者工具查找 java 脚本文件，因此我可以读取源代码但我找不到它。

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

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

【问题讨论】：

其实不是，只是想将开发工具、动画、一般调试合二为一。
该脚本本身很长，绕着圈子走来走去，寻找一点，检查不断变化的_5sda _5sdb 和_5sda 跨度。如果您只想要“书写动画”，我可以建议一个不同的脚本，它只是计算时间，并将文本更改/添加到 div。
是的，我看到它们被改变了，但我的主要重点是寻找它的来源。

【解决方案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 以查看该组件是否是开源的。但是，在这种情况下，您不走运。

【讨论】：

就是这样，这就是我所缺少的。你是救生员。我需要看看引擎盖下的一切是如何运作的，非常感谢！我是否在这个上找到它并不重要，但它仍然对我自己的动画调试或当我使用框架、插件时有好处，这样我就可以跟踪事件链。