Improve slide up animation

1 files changed, 21 insertions, 2 deletions

diff --git a/ext/bg/js/search.js b/ext/bg/js/search.js
index 6ff710f0..45714a02 100644
--- a/ext/bg/js/search.js
+++ b/ext/bg/js/search.js
@@ -28,7 +28,8 @@ class DisplaySearch extends Display {
 
         this.search = $('#search').click(this.onSearch.bind(this));
         this.query = $('#query').on('input', this.onSearchInput.bind(this));
-        this.intro = $('#intro');
+        this.intro = document.querySelector('#intro');
+        this.introHidden = false;
 
         this.dependencies = Object.assign({}, this.dependencies, {docRangeFromPoint, docSentenceExtract});
 
@@ -50,13 +51,31 @@ class DisplaySearch extends Display {
     async onSearch(e) {
         try {
             e.preventDefault();
-            this.intro.slideUp();
+            this.hideIntro();
             const {length, definitions} = await apiTermsFind(this.query.val(), this.optionsContext);
             super.termsShow(definitions, await apiOptionsGet(this.optionsContext));
         } catch (e) {
             this.onError(e);
         }
     }
+
+    hideIntro() {
+        if (this.introHidden) {
+            return;
+        }
+
+        this.introHidden = true;
+
+        if (this.intro === null) {
+            return;
+        }
+
+        const size = this.intro.getBoundingClientRect();
+        this.intro.style.height = `${size.height}px`;
+        this.intro.style.transition = 'height 0.4s ease-in-out 0s';
+        window.getComputedStyle(this.intro).getPropertyValue('height'); // Commits height so next line can start animation
+        this.intro.style.height = '0';
+    }
 }
 
 window.yomichan_search = new DisplaySearch();