Add animation to ToC.

cotes2020 · cotes2020 · commit cd5df3d53cfc · 2019-11-24T23:54:27.000+08:00
diff --git a/_includes/head.html b/_includes/head.html
@@ -84,8 +84,8 @@
     <link rel="stylesheet" href="{{ site.baseurl }}/assets/css/post.css">
     {% if site.toc and page.toc %}
       <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/js/dist/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" async></script>
     {% endif %}
   {% endif %}
 
diff --git a/assets/css/main.scss b/assets/css/main.scss
@@ -404,6 +404,7 @@ footer .license a {
 
 
 /*--- Panels ---*/
+
 .access {
   top: 2rem;
   transition: top 0.2s ease-in-out;
diff --git a/assets/css/post.scss b/assets/css/post.scss
@@ -7,12 +7,26 @@
   MIT License
 */
 
+@keyframes fade-up {
+  from {
+    opacity: 0;
+    position: relative;
+    top: 2rem;
+  }
+  to {
+    opacity: 1;
+    position: relative;
+    top: 0;
+  }
+}
+
 #toc-wrap {
   border-left: 1px solid rgba(158, 158, 158, 0.17);
   position: -webkit-sticky;
   position: sticky;
   top: 2rem;
   transition: top 0.2s ease-in-out;
+  animation: fade-up .8s;
 }
 
 #toc-wrap.topbar-down {
