add animations to the route transitions
This commit is contained in:
Andreas Zweili
parent
701c596ad1
commit
b18c0f86c2
30
src/App.vue
30
src/App.vue
|
|
@ -1,6 +1,10 @@
|
|||
<template>
|
||||
<the-header></the-header>
|
||||
<router-view></router-view>
|
||||
<router-view v-slot="slotProps">
|
||||
<transition name="route" mode="out-in">
|
||||
<component :is="slotProps.Component"></component>
|
||||
</transition>
|
||||
</router-view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
@ -27,4 +31,28 @@ html {
|
|||
body {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.route-enter-from {
|
||||
opacity: 0;
|
||||
transform: translateY(-30px);
|
||||
}
|
||||
|
||||
.route-leave-to {
|
||||
opacity: 0;
|
||||
transform: translateY(30px);
|
||||
}
|
||||
|
||||
.route-enter-active {
|
||||
transition: all 0.3s ease-out;
|
||||
}
|
||||
|
||||
.route-leave-active {
|
||||
transition: all 0.3s ease-in;
|
||||
}
|
||||
|
||||
.route-enter-to,
|
||||
.route-leave-from {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,30 +1,32 @@
|
|||
<template>
|
||||
<section>
|
||||
<base-card>
|
||||
<h2>{{ fullName }}</h2>
|
||||
<h3>${{ rate }}/hour</h3>
|
||||
</base-card>
|
||||
</section>
|
||||
<section>
|
||||
<base-card>
|
||||
<header>
|
||||
<h2>Interested? Reach out now!</h2>
|
||||
<base-button link :to="coachContactLink">Contact</base-button>
|
||||
</header>
|
||||
<router-view></router-view>
|
||||
</base-card>
|
||||
</section>
|
||||
<section>
|
||||
<base-card>
|
||||
<base-badge
|
||||
v-for="area in areas"
|
||||
:key="area"
|
||||
:type="area"
|
||||
:title="area"
|
||||
></base-badge>
|
||||
<p>{{ description }}</p>
|
||||
</base-card>
|
||||
</section>
|
||||
<div>
|
||||
<section>
|
||||
<base-card>
|
||||
<h2>{{ fullName }}</h2>
|
||||
<h3>${{ rate }}/hour</h3>
|
||||
</base-card>
|
||||
</section>
|
||||
<section>
|
||||
<base-card>
|
||||
<header>
|
||||
<h2>Interested? Reach out now!</h2>
|
||||
<base-button link :to="coachContactLink">Contact</base-button>
|
||||
</header>
|
||||
<router-view></router-view>
|
||||
</base-card>
|
||||
</section>
|
||||
<section>
|
||||
<base-card>
|
||||
<base-badge
|
||||
v-for="area in areas"
|
||||
:key="area"
|
||||
:type="area"
|
||||
:title="area"
|
||||
></base-badge>
|
||||
<p>{{ description }}</p>
|
||||
</base-card>
|
||||
</section>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
|
|||
|
|
@ -1,41 +1,43 @@
|
|||
<template>
|
||||
<base-dialog
|
||||
:show="!!error"
|
||||
title="An error has occured!"
|
||||
@close="handleError"
|
||||
>
|
||||
<p>{{ error }}</p>
|
||||
</base-dialog>
|
||||
<section>
|
||||
<coach-filter @change-filter="setFilter"></coach-filter>
|
||||
</section>
|
||||
<base-card>
|
||||
<div>
|
||||
<base-dialog
|
||||
:show="!!error"
|
||||
title="An error has occured!"
|
||||
@close="handleError"
|
||||
>
|
||||
<p>{{ error }}</p>
|
||||
</base-dialog>
|
||||
<section>
|
||||
<div class="controls">
|
||||
<base-button mode="outline" @click="loadCoaches(true)"
|
||||
>Refresh</base-button
|
||||
>
|
||||
<base-button v-if="!isCoach && !isLoading" link to="/register"
|
||||
>Register as Coach</base-button
|
||||
>
|
||||
</div>
|
||||
<div v-if="isLoading">
|
||||
<base-spinner></base-spinner>
|
||||
</div>
|
||||
<ul v-else-if="hasCoaches">
|
||||
<coach-item
|
||||
v-for="coach in filteredCoaches"
|
||||
:key="coach.id"
|
||||
:id="coach.id"
|
||||
:firstName="coach.firstName"
|
||||
:lastName="coach.lastName"
|
||||
:areas="coach.areas"
|
||||
:rate="coach.hourlyRate"
|
||||
></coach-item>
|
||||
</ul>
|
||||
<h3 v-else>No coaches found.</h3>
|
||||
<coach-filter @change-filter="setFilter"></coach-filter>
|
||||
</section>
|
||||
</base-card>
|
||||
<base-card>
|
||||
<section>
|
||||
<div class="controls">
|
||||
<base-button mode="outline" @click="loadCoaches(true)"
|
||||
>Refresh</base-button
|
||||
>
|
||||
<base-button v-if="!isCoach && !isLoading" link to="/register"
|
||||
>Register as Coach</base-button
|
||||
>
|
||||
</div>
|
||||
<div v-if="isLoading">
|
||||
<base-spinner></base-spinner>
|
||||
</div>
|
||||
<ul v-else-if="hasCoaches">
|
||||
<coach-item
|
||||
v-for="coach in filteredCoaches"
|
||||
:key="coach.id"
|
||||
:id="coach.id"
|
||||
:firstName="coach.firstName"
|
||||
:lastName="coach.lastName"
|
||||
:areas="coach.areas"
|
||||
:rate="coach.hourlyRate"
|
||||
></coach-item>
|
||||
</ul>
|
||||
<h3 v-else>No coaches found.</h3>
|
||||
</section>
|
||||
</base-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
|
|||
|
|
@ -1,32 +1,34 @@
|
|||
<template>
|
||||
<base-dialog
|
||||
:show="!!error"
|
||||
title="An error has occured!"
|
||||
@close="handleError"
|
||||
>
|
||||
<p>{{ error }}</p>
|
||||
</base-dialog>
|
||||
<div>
|
||||
<base-dialog
|
||||
:show="!!error"
|
||||
title="An error has occured!"
|
||||
@close="handleError"
|
||||
>
|
||||
<p>{{ error }}</p>
|
||||
</base-dialog>
|
||||
|
||||
<section>
|
||||
<base-card>
|
||||
<header>
|
||||
<h2>Requests Received</h2>
|
||||
</header>
|
||||
<div v-if="isLoading">
|
||||
<base-spinner></base-spinner>
|
||||
</div>
|
||||
<ul v-else-if="hasRequests">
|
||||
<request-item
|
||||
v-for="req in recievedRequests"
|
||||
:key="req.id"
|
||||
:email="req.userEmail"
|
||||
:message="req.message"
|
||||
>
|
||||
</request-item>
|
||||
</ul>
|
||||
<h3 v-else>You haven't received any messages</h3>
|
||||
</base-card>
|
||||
</section>
|
||||
<section>
|
||||
<base-card>
|
||||
<header>
|
||||
<h2>Requests Received</h2>
|
||||
</header>
|
||||
<div v-if="isLoading">
|
||||
<base-spinner></base-spinner>
|
||||
</div>
|
||||
<ul v-else-if="hasRequests">
|
||||
<request-item
|
||||
v-for="req in recievedRequests"
|
||||
:key="req.id"
|
||||
:email="req.userEmail"
|
||||
:message="req.message"
|
||||
>
|
||||
</request-item>
|
||||
</ul>
|
||||
<h3 v-else>You haven't received any messages</h3>
|
||||
</base-card>
|
||||
</section>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
|
|||
Reference in New Issue