rayelliott
/
marc-leopold
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

background image transition working

This commit is contained in:
ManjaroOne666 2019-01-13 20:11:19 +00:00
parent be74441825
commit 8f34dc75d2
1 changed files with 16 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
components/GalleryImageViewer.vue
View File

@ -2,7 +2,7 @@
<div class="image-viewer" <div class="image-viewer"
:class="{ 'is-visible': isVisible }"> :class="{ 'is-visible': isVisible }">
<transition name="trans-bg-image" mode="out-in"> <transition name="trans-bg-image" mode="out-in">
<div v-show="backgroundImageUrl" class="viewer-background" :style="backgroundStyle"></div> <div v-if="backgroundImageUrl" :key="backgroundImageUrl" class="viewer-background" :style="backgroundStyle"></div>
</transition> </transition>
<div class="image-container"> <div class="image-container">
<transition name="trans-bg-image"> <transition name="trans-bg-image">
@ -221,20 +221,23 @@ export default {
} }
} }
.trans-image-enter-active, .trans-image-leave-active { .trans-image {
transition: opacity 5s; &-enter-active, &-leave-active {
transition: opacity .5s;
} }
.trans-image-enter, .trans-image-leave-to { &-enter, &-leave-to {
opacity: 0; opacity: 0;
} }
.trans-bg-image-enter-active, .trans-bg-image-leave-active {
transition: opacity 1s;
} }
.trans-bg-image-enter, .trans-bg-image-leave-to { .trans-bg-image {
&-enter-active, &-leave-active {
transition: opacity .3s;
}
&-enter, &-leave-to {
opacity: 0; opacity: 0;
} }
}
</style> </style>