(UI) add media preview animation

Author: antoine92190

src/lib/ChatWindow.vue

@@ -78,11 +78,13 @@
 				</template>
 			</room>
 		</div>
-		<media-preview
-			v-if="showMediaPreview"
-			:file="filePreview"
-			@close-media-preview="showMediaPreview = false"
-		/>
+		<transition name="vac-fade-preview" appear>
+			<media-preview
+				v-if="showMediaPreview"
+				:file="filePreview"
+				@close-media-preview="showMediaPreview = false"
+			/>
+		</transition>
 	</div>
 </template>
 

src/lib/MediaPreview/MediaPreview.vue

@@ -6,27 +6,24 @@
 		@click.stop="closeModal"
 		@keydown.esc="closeModal"
 	>
-		<div v-if="isImage" class="vac-media-preview-container">
-			<div
-				class="vac-image-preview"
-				:style="{
-					'background-image': `url('${file.url}')`
-				}"
-				@keypress.esc="closeModal"
-			/>
-		</div>
+		<transition name="vac-bounce-preview" appear>
+			<div v-if="isImage" class="vac-media-preview-container">
+				<div
+					class="vac-image-preview"
+					:style="{
+						'background-image': `url('${file.url}')`
+					}"
+				/>
+			</div>
 
-		<div
-			v-else-if="isVideo"
-			class="vac-video-preview"
-			@keypress.esc="closeModal"
-		>
-			<video width="100%" height="100%" controls>
-				<source :src="file.url" />
-			</video>
-		</div>
+			<div v-else-if="isVideo" class="vac-video-preview">
+				<video width="100%" height="100%" controls>
+					<source :src="file.url" />
+				</video>
+			</div>
+		</transition>
 
-		<div class="vac-svg-button" @click="closeModal">
+		<div class="vac-svg-button">
 			<slot name="preview-close-icon">
 				<svg-icon name="close-outline" param="preview" size="10" />
 			</slot>

src/styles/animation.scss

@@ -98,3 +98,34 @@
 		transform: scale(1);
 	}
 }
+
+// Open media preview animation
+.vac-fade-preview-enter {
+	opacity: 0;
+}
+
+.vac-fade-preview-enter-active {
+	transition: opacity 0.1s;
+}
+
+.vac-fade-preview-leave-active {
+	transition: opacity 0.2s;
+	opacity: 0;
+}
+
+.vac-bounce-preview-enter-active {
+	animation: vac-bounce-image-in 0.4s;
+}
+
+.vac-bounce-preview-leave-active {
+	animation: vac-bounce-image-in 0.3s reverse;
+}
+
+@keyframes vac-bounce-image-in {
+	0% {
+		transform: scale(0.6);
+	}
+	100% {
+		transform: scale(1);
+	}
+}