Chrome开发人员工具用于定位调用的javascript函数
Chrome开发人员工具用于定位调用的javascript函数
提问于 2014-12-14 13:00:38
在http://themify.me/中
当滚动到如下图所示的部分时，3个图标将向上移动。我很想知道js文件触发的是什么。我应该如何使用chrome开发人员工具来定位它？
回答 2
Stack Overflow用户
发布于 2014-12-14 13:09:53
它是一个声明为-webkit-animation-name属性的keyframe动画：
li.animate-up {
-webkit-animation-name: flyInBottom;
} 下面是实现：
@keyframes flyInBottom {
0% {
opacity: 0;
-webkit-transform: translate(0px, 200px);
-ms-transform: translate(0px, 200px);
transform: translate(0px, 200px);
}
100% {
opacity: 1;
-webkit-transform: translate(0px, 0px);
-ms-transform: translate(0px, 0px);
transform: translate(0px, 0px);
}
}我只需单击Inspect element，然后使用CSS选择器即可找到它。
Stack Overflow用户
发布于 2014-12-14 13:25:25
动画是使用CSS动画触发的。要定位CSS属性，可以使用chrome developer工具
。注意左上角的放大镜图标。只需单击并将鼠标移到您想要检查区域上。在本例中，元素是li，应用于它的CSS类是animate-up。您将注意到，在右侧，您将看到样式部分，其中包含应用于给定元素的CSS样式列表。
只需单击style.css链接，您将看到整个样式表。在这里，您将找到
.slide-up.animated li.animate-up {
-webkit-animation-name: flyInBottom;
animation-name: flyInBottom;
}只需滚动几个区块，您就会发现flyInBottom的动画定义。
@-webkit-keyframes flyInBottom {
0% {
opacity: 0;
-webkit-transform: translate(0px, 200px);
-ms-transform: translate(0px, 200px);
transform: translate(0px, 200px);
}
100% {
opacity: 1;
-webkit-transform: translate(0px, 0px);
-ms-transform: translate(0px, 0px);
transform: translate(0px, 0px);
}
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/27466507
复制相关文章
相似问题
腾讯云开发者
