add fade-in fade-out

2 files changed, 18 insertions, 6 deletions

diff --git a/src/components/post_status_form/post_status_form.js b/src/components/post_status_form/post_status_form.js
index 3de6f70a..9027566f 100644
--- a/src/components/post_status_form/post_status_form.js
+++ b/src/components/post_status_form/post_status_form.js
@@ -83,7 +83,7 @@ const PostStatusForm = {
       },
       caret: 0,
       pollFormVisible: false,
-      showDropIcon: false,
+      showDropIcon: 'hide',
       dropStopTimeout: null
     }
   },
@@ -254,7 +254,7 @@ const PostStatusForm = {
         e.preventDefault() // allow dropping text like before
         this.dropFiles = e.dataTransfer.files
         clearTimeout(this.dropStopTimeout)
-        this.showDropIcon = false
+        this.showDropIcon = 'hide'
       }
     },
     fileDragStop (e) {
@@ -262,13 +262,14 @@ const PostStatusForm = {
       // directly caused unwanted flickering, this is not perfect either but
       // much less noticable.
       clearTimeout(this.dropStopTimeout)
-      this.dropStopTimeout = setTimeout(() => (this.showDropIcon = false), 100)
+      this.showDropIcon = 'fade'
+      this.dropStopTimeout = setTimeout(() => (this.showDropIcon = 'hide'), 500)
     },
     fileDrag (e) {
       e.dataTransfer.dropEffect = 'copy'
       if (e.dataTransfer && e.dataTransfer.types.includes('Files')) {
         clearTimeout(this.dropStopTimeout)
-        this.showDropIcon = true
+        this.showDropIcon = 'show'
       }
     },
     onEmojiInputInput (e) {
diff --git a/src/components/post_status_form/post_status_form.vue b/src/components/post_status_form/post_status_form.vue
index e23e9e48..c4d7f7e2 100644
--- a/src/components/post_status_form/post_status_form.vue
+++ b/src/components/post_status_form/post_status_form.vue
@@ -9,7 +9,8 @@
       @dragover.prevent="fileDrag"
     >
       <div
-        v-show="showDropIcon"
+        v-show="showDropIcon !== 'hide'"
+        :style="{ animation: showDropIcon === 'show' ? 'fade-in 0.25s' : 'fade-out 0.5s' }"
         class="drop-indicator icon-upload"
         @dragleave="fileDragStop"
         @drop.stop="fileDrop"
@@ -512,6 +513,16 @@
     z-index: 4;
   }
 
+  @keyframes fade-in {
+    from { opacity: 0; }
+    to   { opacity: 0.6; }
+  }
+
+  @keyframes fade-out {
+    from { opacity: 0.6; }
+    to   { opacity: 0; }
+  }
+
   .drop-indicator {
     position: absolute;
     z-index: 1;
@@ -521,9 +532,9 @@
     display: flex;
     align-items: center;
     justify-content: center;
+    opacity: 0.6;
     color: $fallback--text;
     color: var(--text, $fallback--text);
-    opacity: 0.6;
     background-color: $fallback--bg;
     background-color: var(--bg, $fallback--bg);
     border-radius: $fallback--tooltipRadius;