diff --git a/src/components/files/Listing.vue b/src/components/files/Listing.vue
index 1eddbeea..1e2be375 100644
--- a/src/components/files/Listing.vue
+++ b/src/components/files/Listing.vue
@@ -78,7 +78,7 @@
 
     <input style="display:none" type="file" id="upload-input" @change="uploadInput($event)" multiple>
 
-    <div v-show="$store.state.multiple" :class="{ active: $store.state.multiple }" id="multiple-selection">
+    <div :class="{ active: $store.state.multiple }" id="multiple-selection">
     <p>{{ $t('files.multipleSelectionEnabled') }}</p>
       <div @click="$store.commit('multiple', false)" tabindex="0" role="button" :title="$t('files.clear')" :aria-label="$t('files.clear')" class="action">
         <i class="material-icons">clear</i>
diff --git a/src/css/listing.css b/src/css/listing.css
index 02bd8d9c..3c2a6a0f 100644
--- a/src/css/listing.css
+++ b/src/css/listing.css
@@ -212,6 +212,16 @@
   font-weight: bold;
 }
 
+@keyframes slidein {
+  from {
+    bottom: -4em;
+  }
+
+  to {
+    bottom: 0;
+  }
+}
+
 #listing #multiple-selection {
   position: fixed;
   bottom: -4em;
@@ -220,7 +230,7 @@
   width: 100%;
   background-color: #2196f3;
   height: 4em;
-  display: flex !important;
+  display: none;
   padding: 0.5em 0.5em 0.5em 1em;
   justify-content: space-between;
   align-items: center;
@@ -228,7 +238,8 @@
 }
 
 #listing #multiple-selection.active {
-  bottom: 0;
+  animation: slidein 0.2s forwards;
+  display: flex;
 }
 
 #listing #multiple-selection p,