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

gallery page functionality implemented

This commit is contained in:
ManjaroOne666 2019-01-13 20:56:05 +00:00
parent 3e2ff82afe
commit a6eea72045
1 changed files with 10 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
components/GalleryImageViewer.vue
View File

@ -6,7 +6,7 @@
</transition> </transition>
<div class="image-container"> <div class="image-container">
<transition name="trans-bg-image"> <transition name="trans-bg-image">
<img v-if="showLoading !== null" class="image" :src="loadingImageUrl"> <img v-if="showLoading" class="image" :src="loadingImageUrl">
</transition> </transition>
</div> </div>
<div class="image-container"> <div class="image-container">
@ -133,13 +133,15 @@ export default {
} }
.image { .image {
position: absolute;
width: auto; width: auto;
height: auto; height: auto;
max-height: 100%; max-height: 100%;
max-width: 100%; max-width: 100%;
margin: 0 auto; margin: 0 auto;
top: 50%; top: 50%;
transform: translateY(-50%); left: 50%;
transform: translate(-50%, -50%);
} }
@media (max-width: $bp__layout) { @media (max-width: $bp__layout) {
@ -222,8 +224,12 @@ export default {
} }
.trans-image { .trans-image {
&-enter-active, &-leave-active { &-enter-active {
transition: opacity 1s; transition: opacity 1s .4s;
}
&-leave-active {
transition: opacity .5s;
} }
&-enter, &-leave-to { &-enter, &-leave-to {