Optimized some modals

src/components/system/GameOverScreen.vue

@@ -7,7 +7,8 @@
 				<h4>You've beaten {{ title }} v{{ versionNumber }}: {{ versionTitle }}</h4>
 			</div>
 		</div>
-		<div slot="body">
+		<template v-slot:body="{ shown }">
+			<div v-if="shown">
 				<div>It took you {{ timePlayed }} to beat the game.</div>
 				<br>
 				<div>Please check the Discord to discuss the game or to check for new content updates!</div>
@@ -19,6 +20,7 @@
 					</a>
 				</div>
 			</div>
+		</template>
 		<div slot="footer" class="game-over-footer">
 			<button @click="keepGoing" class="button">Keep Going</button>
 			<button @click="playAgain" class="button danger">Play Again</button>

src/components/system/Info.vue

@@ -7,7 +7,8 @@
 				<h4>v{{ versionNumber}}: {{ versionTitle }}</h4>
 			</div>
 		</div>
-		<div slot="body">
+		<template v-slot:body="{ shown }">
+			<div v-if="shown">
 				<div v-if="author">
 					By {{ author }}
 				</div>
@@ -51,6 +52,7 @@
 					</div>
 				</div>
 			</div>
+		</template>
 	</Modal>
 </template>
 

src/components/system/Modal.vue

@@ -1,23 +1,23 @@
 <template>
 	<portal to="modal-root">
-		<transition name="modal">
+		<transition name="modal" @before-enter="setAnimating(true)" @after-leave="setAnimating(false)">
 			<div class="modal-mask" v-show="show" v-on:pointerdown.self="$emit('close')">
 				<div class="modal-wrapper">
 					<div class="modal-container">
 						<div class="modal-header">
-							<slot name="header">
+							<slot name="header" :shown="isVisible">
 								default header
 							</slot>
 						</div>
 						<simplebar class="modal-body">
 							<branches>
-								<slot name="body">
+								<slot name="body" :shown="isVisible">
 									default body
 								</slot>
 							</branches>
 						</simplebar>
 						<div class="modal-footer">
-							<slot name="footer">
+							<slot name="footer" :shown="isVisible">
 								<div class="modal-default-footer">
 									<div class="modal-default-flex-grow"></div>
 									<button class="button modal-default-button" @click="$emit('close')">
@@ -36,8 +36,23 @@
 <script>
 export default {
 	name: 'Modal',
+	data() {
+		return {
+			isAnimating: false
+		}
+	},
 	props: {
 		show: Boolean
+	},
+	computed: {
+		isVisible() {
+			return this.show || this.isAnimating;
+		}
+	},
+	methods: {
+		setAnimating(isAnimating) {
+			this.isAnimating = isAnimating;
+		}
 	}
 }
 </script>