Add transitions

src/components/ModalWindow.vue

@@ -1,6 +1,6 @@
 <template>
-	<div class='modal_window__overlay'>
-		<div class='modal_window'>
+	<div class='modal_window__overlay' :class='{"modal_window--show": showModal}'>
+		<div class='modal_window' :class='{"modal_window--show": showModal}'>
 			Placeholder content<br/>
 			Placeholder content<br/>
 			Placeholder content<br/>
@@ -35,9 +35,32 @@
 		position: absolute;
 		top: 0;
 		left: 0;
+
+		opacity: 0;
+		pointer-events: none;
+		transition:  opacity 0.3s;
+
+		@at-root #{&}--show {
+			opacity: 1;
+			pointer-events: all;
+			transition: opacity 0.3s;
+		}
 	}
 	.modal_window {
 		width: 20rem;
 		background-color: #fff;
+		margin-top: -3rem;
+		opacity: 0;
+		pointer-events: none;
+
+		transition: margin-top 0.3s, opacity 0.3s;
+
+		@at-root #{&}--show {
+			margin-top: 0;
+			opacity: 1;
+			pointer-events: all;
+
+			transition: all 0.3s;
+		}
 	}
 </style>