tesses50
/
freetube
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add animation for router change

This commit is contained in:
Preston 2020-09-20 09:35:53 -04:00
parent b58821908a
commit a3926721cb
2 changed files with 20 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
src/renderer/App.css
View File

@ -23,9 +23,26 @@ body {
margin-left: 80px; margin-left: 80px;
} }
.banner {
margin-top: 70px;
margin-bottom: -65px;
}
.fade-enter-active, .fade-leave-active {
transition: opacity .2s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
opacity: 0;
}
@media only screen and (max-width: 680px) { @media only screen and (max-width: 680px) {
.expand, .routerView { .expand, .routerView {
margin-left: 0px; margin-left: 0px;
margin-bottom: 80px; margin-bottom: 80px;
} }
.banner {
margin-top: 70px;
margin-bottom: -65px;
}
} }

6
src/renderer/App.vue
View File

@ -8,9 +8,9 @@
> >
<top-nav ref="topNav" /> <top-nav ref="topNav" />
<side-nav ref="sideNav" /> <side-nav ref="sideNav" />
<Transition <transition
mode="out-in" mode="out-in"
name="slide-up" name="fade"
> >
<!-- <keep-alive> --> <!-- <keep-alive> -->
<RouterView <RouterView
@ -19,7 +19,7 @@
:class="{ expand: !isOpen }" :class="{ expand: !isOpen }"
/> />
<!-- </keep-alive> --> <!-- </keep-alive> -->
</Transition> </transition>
<ft-toast /> <ft-toast />
<ft-progress-bar <ft-progress-bar
v-if="showProgressBar" v-if="showProgressBar"