#52 Fennec: use Vue transitions to fade out PlayersAlive

Author: drweissbrot

src/themes/fennec/css/transitions/default.css

@@ -0,0 +1,9 @@
+.v-enter-active,
+.v-leave-active {
+	transition: opacity 0.3s ease;
+}
+
+.v-enter-from,
+.v-leave-to {
+	opacity: 0;
+}

src/themes/fennec/index.css

@@ -2,4 +2,5 @@
 
 @import '/hud/css/base.css';
 @import '/hud/css/font.css';
+@import '/hud/css/transitions/default.css';
 @import '/hud/css/vars.css';

src/themes/fennec/players-alive/players-alive.css

@@ -13,11 +13,6 @@
 	box-shadow: 0 0 0.4rem rgba(0, 0, 0, 0.5);
 	font-weight: 700;
 	text-transform: uppercase;
-	transition: opacity 0.3s ease;
-}
-
-.players-alive:not(.--active) {
-	opacity: 0;
 }
 
 .title {

src/themes/fennec/players-alive/players-alive.html

@@ -1,17 +1,19 @@
-<div class="players-alive" :class="{ '--active': isActive }">
-	<div class="title">
-		Players Alive
-	</div>
+<Transition>
+	<div v-if="isActive" class="players-alive">
+		<div class="title">
+			Players Alive
+		</div>
 
-	<div :class="['team', '--left', leftTeamColorClass]">
-		{{ leftTeamAlive }}
-	</div>
+		<div :class="['team', '--left', leftTeamColorClass]">
+			{{ leftTeamAlive }}
+		</div>
 
-	<div class="vs">
-		vs
-	</div>
+		<div class="vs">
+			vs
+		</div>
 
-	<div :class="['team', '--right', rightTeamColorClass]">
-		{{ rightTeamAlive }}
+		<div :class="['team', '--right', rightTeamColorClass]">
+			{{ rightTeamAlive }}
+		</div>
 	</div>
-</div>
+</Transition>