Chrome开发者工具可以找到调用的javascript函数

Question

在http://themify.me/

中

当滚动到该部分时，如下图所示，将激活3个图标。 我很想知道js文件是什么。 我应该如何使用chrome开发人员工具找到它？

Answer 1

这是一个keyframe动画，声明为-webkit-animation-name属性：

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选择器即可找到它。

Answer 2

使用CSS动画触发动画。要找到CSS属性，您可以使用chrome开发人员工具。请注意左上角的放大镜图标。只需单击它并将鼠标移动到您想要检查的区域上。在这种情况下，元素为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);
}
}