【发布时间】：2018-03-22 09:24:42
【问题描述】：
我有一个网页，如果在最后一个文本框中按下 tab 键，则右侧幻灯片的侧窗格（如侧菜单）。
在 chrome 开发工具中，我可以看到它是一个带有 control-sidebar control-sidebar-dark 类的 aside 标记，但在 side 标记上设置 DOM 断点（子树和属性）不会捕获任何内容。
在查看 DOM 时，它似乎根本没有被操纵（我希望滑入应该这样做），因为我没有看到 chrome 开发人员工具为受影响的元素显示的 HTML 标记上的颜色闪烁。
我希望 javascript 能够处理 side 标签的滑入，但在这种情况下如何确定呢？这可能是由于仅 CSS 动画或其他原因（如果是）而不是如何调试？
我也尝试在开发者工具的animation tab 中记录，但它也保持空白。
这发生在网站的特权部分，所以我很抱歉无法放置代码示例或 URL。
PS：模板是右边http://www.ampleadmin.wrappixel.com/ampleadmin-html/ampleadmin-rtl/index.html(the导航面板的一些修改版本）但它被记录在开发工具动画面板中，而我的没有。
【问题讨论】：
-
听起来像一个微不足道的 CSS
transition。 -
@wOxxOm 是的，看起来像。
.control-sidebar有transition: right 0.3s ease-in-out，但禁用它不会改变任何东西，而且我也无法在开发工具的“动画”选项卡中录制任何内容。 -
无法记录转换 AFAIK。该网站可能使用了来自 js 的 animation API，这也可能在录音中丢失（这是一个猜测）。
-
如果我们需要确定在某个动作（如悬停或单击）上某个元素上的哪个属性被动画化怎么办？
-
我会尝试记录 devtools
performance面板中发生的事情。如果在js中进行了更改，您将能够使用flamechart快速找到它。
标签： html css google-chrome-devtools