asandikci.com/web
1
0
Fork 0
Code Issues 10 Pull requests Projects Releases Packages Wiki Activity Actions

Add animation to ToC.

Browse source
This commit is contained in:
Cotes Chung 2019-11-24 22:08:17 +08:00
parent 9e67a9dc22
commit 75b825cdde
3 changed files with 17 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
_includes/head.html
View file

@ -84,8 +84,8 @@
<link rel="stylesheet" href="{{ site.baseurl }}/assets/css/post.css"> <link rel="stylesheet" href="{{ site.baseurl }}/assets/css/post.css">
{% if site.toc and page.toc %} {% if site.toc and page.toc %}
<link rel="stylesheet" href="{{ site.baseurl }}/assets/lib/bootstrap-toc-1.0.1/bootstrap-toc.min.css" /> <link rel="stylesheet" href="{{ site.baseurl }}/assets/lib/bootstrap-toc-1.0.1/bootstrap-toc.min.css" />
<script src="{{ site.baseurl }}/assets/lib/bootstrap-toc-1.0.1/bootstrap-toc.min.js"></script> <script src="{{ site.baseurl }}/assets/lib/bootstrap-toc-1.0.1/bootstrap-toc.min.js" async></script>
<script src="{{ site.baseurl }}/assets/js/dist/toc.min.js"></script> <script src="{{ site.baseurl }}/assets/js/dist/toc.min.js" async></script>
{% endif %} {% endif %}
{% endif %} {% endif %}

1
assets/css/main.scss
View file

@ -404,6 +404,7 @@ footer .license a {
/*--- Panels ---*/ /*--- Panels ---*/
.access { .access {
top: 2rem; top: 2rem;
transition: top 0.2s ease-in-out; transition: top 0.2s ease-in-out;

14
assets/css/post.scss
View file

@ -7,12 +7,26 @@
MIT License MIT License
*/ */
@keyframes fade-up {
from {
opacity: 0;
position: relative;
top: 2rem;
}
to {
opacity: 1;
position: relative;
top: 0;
}
}
#toc-wrap { #toc-wrap {
border-left: 1px solid rgba(158, 158, 158, 0.17); border-left: 1px solid rgba(158, 158, 158, 0.17);
position: -webkit-sticky; position: -webkit-sticky;
position: sticky; position: sticky;
top: 2rem; top: 2rem;
transition: top 0.2s ease-in-out; transition: top 0.2s ease-in-out;
animation: fade-up .8s;
} }
#toc-wrap.topbar-down { #toc-wrap.topbar-down {