Spythere/stacjownik
1
0
Fork 0
mirror of https://github.com/Spythere/stacjownik.git synced 2026-05-03 13:28:11 +00:00
Code Issues Packages Projects Releases Wiki Activity

Dodano animację przejścia pomiędzy widokami trybów scenerii

Browse Source
This commit is contained in:
Spythere
2022-01-10 21:05:42 +01:00
parent e21be10772
commit 488c7f3f39
2 changed files with 27 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/SceneryView/SceneryHistory.vue
+1
View File
@@ -194,6 +194,7 @@ export default defineComponent({
transition: all 100ms ease-out 100ms; transition: all 100ms ease-out 100ms;
} }
} }
.scenery-history { .scenery-history {
height: 600px; height: 600px;
overflow-y: hidden; overflow-y: hidden;
src/views/SceneryView.vue
+26 -7
View File
@@ -29,14 +29,18 @@
<SceneryHeader :station="stationInfo" /> <SceneryHeader :station="stationInfo" />
<div v-if="viewMode == 'info'"> <transition name="scenery-view-anim" mode="out-in">
<SceneryInfo :station="stationInfo" :timetableOnly="timetableOnly" /> <div :key="viewMode">
<SceneryTimetable :station="stationInfo" :timetableOnly="timetableOnly" /> <div v-if="viewMode == 'info'">
</div> <SceneryInfo :station="stationInfo" :timetableOnly="timetableOnly" />
<SceneryTimetable :station="stationInfo" :timetableOnly="timetableOnly" />
</div>
<div v-else-if="viewMode == 'history'"> <div v-else-if="viewMode == 'history'">
<SceneryHistory :name="stationInfo.name" /> <SceneryHistory :name="stationInfo.name" />
</div> </div>
</div>
</transition>
</div> </div>
</div> </div>
</template> </template>
@@ -118,6 +122,21 @@ export default defineComponent({
$sceneryBgCol: #333; $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 { .scenery {
&-view { &-view {
min-height: 100%; min-height: 100%;