Merge pull request #16 from readthedocs/fade-out-fade-in

Add animation for fading-in and fading-out

Author: dojutsu-user

sphinx_search/_static/css/rtd_sphinx_search.css

@@ -121,6 +121,7 @@
     width: 90%;
     margin-bottom: 15px;
 }
+
 .search__outer .bar:before,
 .search__outer .bar:after {
     content: "";
@@ -131,9 +132,11 @@
     background: #5264ae;
     transition: 0.2s ease all;
 }
+
 .search__outer .bar:before {
     left: 50%;
 }
+
 .search__outer .bar:after {
     right: 50%;
 }
@@ -163,14 +166,8 @@
     cursor: pointer;
 }
 
-/* Helper class */
-
-.display-block {
-    display: block;
-    animation: fade-in 0.4s;
-}
-
 /* Title of each search result */
+
 .search__result__title {
     /* Display and box model */
     display: inline-block;
@@ -185,11 +182,13 @@
 }
 
 /* Path of each search result */
+
 .search__result__path {
     color: #b3b3b3;
 }
 
 /* Content of each search result */
+
 .search__result__content {
     text-decoration: none;
     color: black;
@@ -200,6 +199,7 @@
 }
 
 /* Highlighting of matched results */
+
 .search__outer em {
     font-style: normal;
 }

sphinx_search/_static/css/rtd_sphinx_search.min.css

@@ -372,17 +372,16 @@ const showSearchModal = () => {
     let search_bar = getInputField();
     search_bar.blur();
 
-    let search_outer_wrapper = document.querySelector(
-        ".search__outer__wrapper"
-    );
-    search_outer_wrapper.classList.add("display-block");
-
-    // sets the value of the input field to empty string and focus it.
-    let search_outer_input = document.querySelector(".search__outer__input");
-    if (search_outer_input !== null) {
-        search_outer_input.value = "";
-        search_outer_input.focus();
-    }
+    $(".search__outer__wrapper").fadeIn(400, () => {
+        // sets the value of the input field to empty string and focus it.
+        let search_outer_input = document.querySelector(
+            ".search__outer__input"
+        );
+        if (search_outer_input !== null) {
+            search_outer_input.value = "";
+            search_outer_input.focus();
+        }
+    });
 };
 
 /**
@@ -399,11 +398,7 @@ const removeSearchModal = () => {
         search_outer_input.blur();
     }
 
-    // sets display="none" to fianlly hide the modal.
-    let search_outer_wrapper = document.querySelector(
-        ".search__outer__wrapper"
-    );
-    search_outer_wrapper.classList.remove("display-block");
+    $(".search__outer__wrapper").fadeOut(400);
 };
 
 window.addEventListener("DOMContentLoaded", evt => {