Doble/LeagueStats
1
0
Fork 0
mirror of https://github.com/vkaelin/LeagueStats.git synced 2026-03-25 12:57:28 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

fix: only display transition between tabs when the data is loaded

Browse source
This commit is contained in:
Valentin Kaelin 2019-12-29 17:49:26 +01:00
parent aad62a3094
commit c38464ea41
2 changed files with 25 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

21
client/src/assets/css/transition.css
View file

@ -53,4 +53,25 @@
transform: translateX(400px);
opacity: 0;
}
/* enter-active-class="transition-all transition-fast ease-out-quad"
enter-class="opacity-0 scale-90"
enter-to-class="opacity-100 scale-100" */
.tab-enter-active {
transition: all;
transition-duration: 150ms;
transition-timing-function: cubic-bezier(.25, .46, .45, .94);
}
.tab-enter {
opacity: 0;
transform: scale(.9);
}
.tab-enter-to {
opacity: 1;
transform: scale(1);
}
/* purgecss end ignore */

9
client/src/layouts/Default.vue
View file

@ -75,11 +75,7 @@
>champions</router-link>
</template>
<!-- View -->
<transition
enter-active-class="transition-all transition-fast ease-out-quad"
enter-class="opacity-0 scale-90"
enter-to-class="opacity-100 scale-100"
>
<transition :name="tabTransition">
<slot></slot>
</transition>
</template>
@ -127,6 +123,9 @@ export default {
uri() {
return `${this.summoner}|${this.region}`
},
tabTransition() {
return this.summonerFound ? 'tab' : 'none'
},
...mapState({
basic: state => state.summoner.basic
}),