Fade break modal

jouni-kantola · Apr 1, 2024 · c05e06a · c05e06a
1 parent 9deb59c
commit c05e06a
Showing 1 changed file with 17 additions and 5 deletions.
diff --git a/resources/scripts/App.vue b/resources/scripts/App.vue
@@ -1,9 +1,11 @@
 <template>
-    <BreakAlert
-        v-if="onBreak"
-        :timeLeft="`${formatTime(timeRemaining)}`"
-        @alertClosed="endBreak"
-    />
+    <Transition name="fade">
+        <BreakAlert
+            v-if="onBreak"
+            :timeLeft="`${formatTime(timeRemaining)}`"
+            @alertClosed="endBreak"
+        />
+    </Transition>
     <Timer
         :minutes="timeRemaining[0]"
         :seconds="timeRemaining[1]"
@@ -250,4 +252,14 @@ async function randomizeTeamOrder() {
     padding: 0 0.5rem;
     margin: 0;
 }
+
+.fade-enter-active,
+.fade-leave-active {
+    transition: opacity 0.5s ease-in;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+    opacity: 0;
+}
 </style>