fixed transition

This commit is contained in:
Jason Wheeler 2022-09-23 17:23:40 -04:00
parent 09c6744dd8
commit bf72d0f0cc
5 changed files with 14 additions and 7 deletions

View file

@ -1,15 +1,14 @@
<template>
<router-view></router-view>
<!--
<router-view v-slot="{ Component }">
<transition :duration="{ enter: 200, leave: 200 }" name="route-fade" mode="out-in">-->
<transition :duration="{ enter: 200, leave: 200 }" name="route-fade" mode="out-in">
<!-- The above durations should be kept in sync with the global css class "fade-on-route-transition" -->
<!-- <component :is="Component" />
<component :is="Component" />
</transition>
</router-view>
-->
</template>
<style lang="scss">
@import "./node_modules/bootstrap/scss/bootstrap";
@import "@/styles/common-animations.scss";
</style>

View file

@ -26,6 +26,8 @@
padding: 2.5px;
border-radius: 5px;
min-width: 70px;
font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
font-size: 14px;
}
.nav-text {

View file

@ -1,5 +1,7 @@
<template>
<div>
404: Page Not Found
</div>
</template>
<script>

View file

@ -1,6 +1,8 @@
<template>
<div>
<navButton type="button" text="back" :scenario="navigationScenarios.CLICKED_BACK"></navButton>
Vehicle Year Placeholder
<p class="fade-on-route-transition">Vehicle Year Placeholder</p>
</div>
</template>
<script>

View file

@ -1,8 +1,10 @@
<template>
<p>Welcome Page Placeholder</p>
<div>
<p class="fade-on-route-transition">Welcome Page Placeholder</p>
<br />
<navButton type="button" text="Next" :scenario="navigationScenarios.CLICKED_FORWARD"></navButton>
<navButton text="Google" :scenario="navigationScenarios.CLICKED_TEST"></navButton>
</div>
</template>
<script>