如何检查HTML元素的动画？

Question

我想看到分配给特定元素的CSS转换或JavaScript / jQuery动画。我应该如何在Chrome DevTools或任何其他开发人员工具中执行此操作？

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

正常：

悬停：

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

Answer 1

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

对于javascript，您可以使用chrome dev工具中的Resources选项卡来查看触发的脚本..只需完成它。

为了你的效果......最有可能是Javascript。

Answer 2

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

CSS中的

1. #someId:hover
   {
    color:red;
   }
   

Jquery中的

2. 。 $('#someid').hover();

3. 通过Unobtrusive jquery。他们会以不引人注目的方式附加活动

现在检查此方法的视图源。他们会在哪些地方附上活动。

Answer 3

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

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

Answer 4

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