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

23
components/GalleryImageViewer.vue
View File

@ -2,7 +2,7 @@
<div class="image-viewer"
:class="{ 'is-visible': isVisible }">
<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>
<div class="image-container">
<transition name="trans-bg-image">
@ -221,20 +221,23 @@ export default {
}
}
.trans-image-enter-active, .trans-image-leave-active {
transition: opacity 5s;
}
.trans-image {
&-enter-active, &-leave-active {
transition: opacity .5s;
}
.trans-image-enter, .trans-image-leave-to {
&-enter, &-leave-to {
opacity: 0;
}
}
.trans-bg-image {
&-enter-active, &-leave-active {
transition: opacity .3s;
}
.trans-bg-image-enter-active, .trans-bg-image-leave-active {
transition: opacity 1s;
}
.trans-bg-image-enter, .trans-bg-image-leave-to {
&-enter, &-leave-to {
opacity: 0;
}
}
</style>