From 488c7f3f39322ba445be22b90eaf02c8339ade84 Mon Sep 17 00:00:00 2001
From: Spythere <spythere@protonmail.com>
Date: Mon, 10 Jan 2022 21:05:42 +0100
Subject: [PATCH] =?UTF-8?q?Dodano=20animacj=C4=99=20przej=C5=9Bcia=20pomi?=
 =?UTF-8?q?=C4=99dzy=20widokami=20tryb=C3=B3w=20scenerii?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/SceneryView/SceneryHistory.vue |  1 +
 src/views/SceneryView.vue                     | 33 +++++++++++++++----
 2 files changed, 27 insertions(+), 7 deletions(-)

diff --git a/src/components/SceneryView/SceneryHistory.vue b/src/components/SceneryView/SceneryHistory.vue
index ad397dd..dbc8909 100644
--- a/src/components/SceneryView/SceneryHistory.vue
+++ b/src/components/SceneryView/SceneryHistory.vue
@@ -194,6 +194,7 @@ export default defineComponent({
     transition: all 100ms ease-out 100ms;
   }
 }
+
 .scenery-history {
   height: 600px;
   overflow-y: hidden;
diff --git a/src/views/SceneryView.vue b/src/views/SceneryView.vue
index 68573ca..0703658 100644
--- a/src/views/SceneryView.vue
+++ b/src/views/SceneryView.vue
@@ -29,14 +29,18 @@
 
       <SceneryHeader :station="stationInfo" />
 
-      <div v-if="viewMode == 'info'">
-        <SceneryInfo :station="stationInfo" :timetableOnly="timetableOnly" />
-        <SceneryTimetable :station="stationInfo" :timetableOnly="timetableOnly" />
-      </div>
+      <transition name="scenery-view-anim" mode="out-in">
+        <div :key="viewMode">
+          <div v-if="viewMode == 'info'">
+            <SceneryInfo :station="stationInfo" :timetableOnly="timetableOnly" />
+            <SceneryTimetable :station="stationInfo" :timetableOnly="timetableOnly" />
+          </div>
 
-      <div v-else-if="viewMode == 'history'">
-        <SceneryHistory :name="stationInfo.name" />
-      </div>
+          <div v-else-if="viewMode == 'history'">
+            <SceneryHistory :name="stationInfo.name" />
+          </div>
+        </div>
+      </transition>
     </div>
   </div>
 </template>
@@ -118,6 +122,21 @@ export default defineComponent({
 
 $sceneryBgCol: #333;
 
+.scenery-view-anim {
+  &-enter-from,
+  &-leave-to {
+    opacity: 0;
+  }
+
+  &-enter-active {
+    transition: all 100ms ease-out;
+  }
+
+  &-leave-active {
+    transition: all 100ms ease-out 100ms;
+  }
+}
+
 .scenery {
   &-view {
     min-height: 100%;