如何检查 HTML 元素的动画？

Posted 2023-02-22

【中文标题】如何检查 HTML 元素的动画？

【英文标题】：How to inspect animation of an HTML element?

【发布时间】：2013-04-04 17:41:06

【问题描述】：

我想查看分配给特定元素的 CSS 过渡或 javascript/jQuery 动画。我应该如何在 Chrome DevTools 或任何其他开发者工具中进行操作？

例如，我访问了一个 Google plus 页面，我注意到当我将鼠标悬停在一张图片上时，它会变灰、放大，并且角落会出现一个 关闭 按钮。

正常：

悬停：

如何查看此行为背后的代码？

【参考方案1】：

他们将注册一个悬停事件。可以通过各种方法添加悬停事件

在 CSS 中

#someId:hover

 color:red;

在 Jquery 中。 $('#someid').hover();

通过不显眼的 jquery。他们会以不显眼的方式附加事件

现在检查此方法的视图源。一些他们将附加事件的地方。

【讨论】：

谢谢。我知道这一点。但是有什么方便的方法吗？我不想查看脚本并找到元素然后检查相应的代码。

【参考方案2】：

对于 css 过渡，在使用 chrome 开发工具时很容易发现。 只需右键单击要查看的动画即可调出检查器。将元素的状态更改为悬停，您可以查看悬停元素的所有 css。

对于 javascript，您可以使用 chrome 开发工具中的“资源”选项卡来查看触发的脚本.. 浏览一下即可。

为了你的效果.. 它很可能是 Javascript。

【讨论】：

谢谢，但是里面的脚本太多了。我只想看看这个元素的 JavaScript。

在资源标签下，有一个文件夹结构。浏览“Frames”下的文件夹，您将看到“Scripts”文件夹。在那里你会找到所有的 Javascript 文件。

【参考方案3】：

据我所知，使用 JavaScript 没有简单的方法，但以下是我在 Chrome 中处理 css 时最喜欢的答案和方法。您可以强制状态和检查悬停 css 等。

https://***.com/a/6778547/941896

【参考方案4】：

右键单击元素选项卡中的 html 元素并选择 :hover 选项。现在您可以在右侧样式选项卡中看到应用于特定元素的悬停 css。请参考屏幕截图