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

Dodano animację dla rozkładów jazdy w widoku scenerii

Browse Source
This commit is contained in:
Spythere
2022-01-10 21:09:19 +01:00
parent 488c7f3f39
commit e6de49bdab
1 changed files with 74 additions and 78 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/SceneryView/SceneryTimetable.vue
+12 -16
View File
@@ -20,6 +20,8 @@
</button> </button>
</div> </div>
<transition name="scenery-timetable-list-anim" mode="out-in">
<div :key="timetableDataStatus + computedScheduledTrains.length">
<span class="timetable-item loading" v-if="timetableDataStatus == 0 && computedScheduledTrains.length == 0"> <span class="timetable-item loading" v-if="timetableDataStatus == 0 && computedScheduledTrains.length == 0">
{{ $t('app.loading') }} {{ $t('app.loading') }}
</span> </span>
@@ -28,7 +30,6 @@
{{ $t('scenery.no-timetables') }} {{ $t('scenery.no-timetables') }}
</span> </span>
<transition-group name="list-anim">
<div <div
class="timetable-item" class="timetable-item"
v-for="(scheduledTrain, i) in computedScheduledTrains" v-for="(scheduledTrain, i) in computedScheduledTrains"
@@ -47,17 +48,14 @@
<span style="color: white"> <span style="color: white">
{{ scheduledTrain.driverName }} {{ scheduledTrain.driverName }}
</span> </span>
<div class="info-route"> <div class="info-route">
<strong>{{ scheduledTrain.beginsAt }} - {{ scheduledTrain.terminatesAt }}</strong> <strong>{{ scheduledTrain.beginsAt }} - {{ scheduledTrain.terminatesAt }}</strong>
</div> </div>
</span> </span>
<span class="general-status"> <span class="general-status">
<span :class="scheduledTrain.stopStatus">{{ $t(`timetables.${scheduledTrain.stopStatus}`) }} </span> <span :class="scheduledTrain.stopStatus">{{ $t(`timetables.${scheduledTrain.stopStatus}`) }} </span>
</span> </span>
</span> </span>
<span class="timetable-schedule"> <span class="timetable-schedule">
<span class="schedule-arrival"> <span class="schedule-arrival">
<span <span
@@ -70,7 +68,6 @@
{{ scheduledTrain.stopInfo.arrivalTimeString }} ({{ scheduledTrain.stopInfo.arrivalDelay }}) {{ scheduledTrain.stopInfo.arrivalTimeString }} ({{ scheduledTrain.stopInfo.arrivalDelay }})
</span> </span>
</span> </span>
<span class="schedule-stop"> <span class="schedule-stop">
<span class="stop-time" v-if="scheduledTrain.stopInfo.stopTime"> <span class="stop-time" v-if="scheduledTrain.stopInfo.stopTime">
{{ scheduledTrain.stopInfo.stopTime }} {{ scheduledTrain.stopInfo.stopTime }}
@@ -91,7 +88,8 @@
</span> </span>
</span> </span>
</div> </div>
</transition-group> </div>
</transition>
</div> </div>
</template> </template>
@@ -223,20 +221,18 @@ h3 {
} }
} }
.list-anim { .scenery-timetable-list-anim {
&-enter-active, &-enter-from,
&-leave-active {
transition: all 250ms ease-out;
}
&-enter,
&-leave-to { &-leave-to {
opacity: 0; opacity: 0;
transform: scale(0.9);
} }
&-move { &-enter-active {
transition: transform 100ms; transition: all 100ms ease-out;
}
&-leave-active {
transition: all 100ms ease-out 100ms;
} }
} }