(refactor) move animation css in separate file

Author: antoine92190

src/ChatWindow/ChatLoader.vue

@@ -1,5 +1,5 @@
 <template>
-	<transition name="fade" appear>
+	<transition name="fade-spinner" appear>
 		<div class="container-center" v-if="show">
 			<div id="circle"></div>
 		</div>
@@ -22,19 +22,6 @@ export default {
 	z-index: 9999;
 }
 
-.fade-enter {
-	opacity: 0;
-}
-
-.fade-enter-active {
-	transition: opacity 0.8s;
-}
-
-.fade-leave-active {
-	transition: opacity 0.2s;
-	opacity: 0;
-}
-
 #circle {
 	height: 32px;
 	width: 32px;

src/ChatWindow/ChatMessage.vue

@@ -58,7 +58,7 @@
 							}"
 							:style="{ background: `url(${message.file.url})` }"
 						>
-							<transition name="fade">
+							<transition name="fade-image">
 								<div class="image-buttons" v-if="imageHover">
 									<div
 										class="svg-button button-view"
@@ -562,47 +562,10 @@ export default {
 	margin: 0;
 }
 
-.fade-enter {
-	opacity: 0;
-}
-
-.fade-enter-active {
-	transition: opacity 1s;
-}
-
-.fade-leave-active {
-	transition: opacity 0.5s;
-	opacity: 0;
-}
-
 .icon-check {
 	height: 14px;
 	width: 14px;
 	vertical-align: middle;
 	margin: -3px 0 0 3px;
 }
-
-.slide-left-enter-active,
-.slide-right-enter-active {
-	transition: all 0.3s ease;
-	transition-property: transform, opacity;
-}
-
-.slide-left-leave-active,
-.slide-right-leave-active {
-	transition: all 0.2s cubic-bezier(1, 0.5, 0.8, 1);
-	transition-property: transform, opacity;
-}
-
-.slide-left-enter,
-.slide-left-leave-to {
-	transform: translateX(10px);
-	opacity: 0;
-}
-
-.slide-right-enter,
-.slide-right-leave-to {
-	transform: translateX(-10px);
-	opacity: 0;
-}
 </style>

src/ChatWindow/MessagesList.vue

@@ -14,7 +14,7 @@
 			>
 				<svg-icon name="menu" />
 			</div>
-			<transition name="slide-fade" v-if="menuActions.length">
+			<transition name="slide-left" v-if="menuActions.length">
 				<div v-if="menuOpened" v-click-outside="closeMenu" class="menu-options">
 					<div class="menu-list">
 						<div v-for="action in menuActions" :key="action.name">
@@ -30,15 +30,15 @@
 		<div class="container-scroll">
 			<div class="messages-container">
 				<chat-loader :show="loadingMessages"></chat-loader>
-				<transition name="fade">
+				<transition name="fade-message">
 					<div class="text-started" v-if="showNoMessages">
 						{{ textMessages.MESSAGES_EMPTY }}
 					</div>
 					<div class="text-started" v-if="showMessagesStarted">
 						{{ textMessages.CONVERSATION_STARTED }} {{ messages[0].date }}
 					</div>
 				</transition>
-				<transition name="fade">
+				<transition name="fade-message">
 					<infinite-loading
 						v-if="messages.length"
 						spinner="spiral"
@@ -49,7 +49,7 @@
 						<div slot="no-more"></div>
 					</infinite-loading>
 				</transition>
-				<transition-group name="fade">
+				<transition-group name="fade-message">
 					<div v-for="(message, i) in messages" :key="message._id">
 						<chat-message
 							:message="message"
@@ -73,7 +73,7 @@
 			</transition>
 		</div>
 		<div ref="roomFooter" class="room-footer">
-			<transition name="slide-up-fade">
+			<transition name="slide-up">
 				<div v-if="messageReply" class="reply-container">
 					<img
 						v-if="isImageCheck(messageReply.file)"
@@ -663,61 +663,4 @@ textarea {
 	pointer-events: none !important;
 	transform: none !important;
 }
-
-.fade-enter {
-	opacity: 0;
-}
-
-.fade-enter-active {
-	transition: opacity 0.5s;
-}
-
-.fade-leave-active {
-	transition: opacity 0.2s;
-	opacity: 0;
-}
-
-.slide-fade-enter-active {
-	transition: all 0.3s ease;
-}
-.slide-fade-leave-active {
-	transition: all 0.2s cubic-bezier(1, 0.5, 0.8, 1);
-}
-.slide-fade-enter,
-.slide-fade-leave-to {
-	transform: translateX(10px);
-	opacity: 0;
-}
-
-.slide-up-fade-enter-active {
-	transition: all 0.3s ease;
-}
-.slide-up-fade-leave-active {
-	transition: all 0.2s cubic-bezier(1, 0.5, 0.8, 1);
-}
-.slide-up-fade-enter,
-.slide-up-fade-leave-to {
-	transform: translateY(10px);
-	opacity: 0;
-}
-
-.bounce-enter-active {
-	animation: bounce-in 0.5s;
-}
-
-.bounce-leave-active {
-	animation: bounce-in 0.3s reverse;
-}
-
-@keyframes bounce-in {
-	0% {
-		transform: scale(0);
-	}
-	50% {
-		transform: scale(1.05);
-	}
-	100% {
-		transform: scale(1);
-	}
-}
 </style>

src/styles/animation.scss

@@ -0,0 +1,100 @@
+// Spinner animation
+.fade-spinner-enter {
+	opacity: 0;
+}
+
+.fade-spinner-enter-active {
+	transition: opacity 0.8s;
+}
+
+.fade-spinner-leave-active {
+	transition: opacity 0.2s;
+	opacity: 0;
+}
+
+// Image hover animation
+.fade-image-enter {
+	opacity: 0;
+}
+
+.fade-image-enter-active {
+	transition: opacity 1s;
+}
+
+.fade-image-leave-active {
+	transition: opacity 0.5s;
+	opacity: 0;
+}
+
+// Messages box and text animation
+.fade-message-enter {
+	opacity: 0;
+}
+
+.fade-message-enter-active {
+	transition: opacity 0.5s;
+}
+
+.fade-message-leave-active {
+	transition: opacity 0.2s;
+	opacity: 0;
+}
+
+// Menu animation
+.slide-left-enter-active,
+.slide-right-enter-active {
+	transition: all 0.3s ease;
+	transition-property: transform, opacity;
+}
+
+.slide-left-leave-active,
+.slide-right-leave-active {
+	transition: all 0.2s cubic-bezier(1, 0.5, 0.8, 1);
+	transition-property: transform, opacity;
+}
+
+.slide-left-enter,
+.slide-left-leave-to {
+	transform: translateX(10px);
+	opacity: 0;
+}
+
+.slide-right-enter,
+.slide-right-leave-to {
+	transform: translateX(-10px);
+	opacity: 0;
+}
+
+// Reply message box animation
+.slide-up-enter-active {
+	transition: all 0.3s ease;
+}
+.slide-up-leave-active {
+	transition: all 0.2s cubic-bezier(1, 0.5, 0.8, 1);
+}
+.slide-up-enter,
+.slide-up-leave-to {
+	transform: translateY(10px);
+	opacity: 0;
+}
+
+// Scroll down icon animation
+.bounce-enter-active {
+	animation: bounce-in 0.5s;
+}
+
+.bounce-leave-active {
+	animation: bounce-in 0.3s reverse;
+}
+
+@keyframes bounce-in {
+	0% {
+		transform: scale(0);
+	}
+	50% {
+		transform: scale(1.05);
+	}
+	100% {
+		transform: scale(1);
+	}
+}

src/styles/index.scss

@@ -1 +1 @@
-// @import 'loader';
+@import 'animation';