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

better transitions

This commit is contained in:
ManjaroOne666 2019-01-13 20:22:02 +00:00
parent 8f34dc75d2
commit 3e2ff82afe
1 changed files with 6 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
components/GalleryImageViewer.vue
View File

@ -1,17 +1,17 @@
<template> <template>
<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">
<div v-if="backgroundImageUrl" :key="backgroundImageUrl" class="viewer-background" :style="backgroundStyle"></div> <div v-if="backgroundImageUrl !== null" :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">
<img v-if="showLoading" class="image" :src="loadingImageUrl"> <img v-if="showLoading !== null" class="image" :src="loadingImageUrl">
</transition> </transition>
</div> </div>
<div class="image-container"> <div class="image-container">
<transition name="trans-image" mode="out-in"> <transition name="trans-image" mode="out-in">
<img v-if="displayImageUrl" :key="displayImageUrl" class="image" :src="displayImageUrl"> <img v-if="displayImageUrl !== null" :key="displayImageUrl" class="image" :src="displayImageUrl">
</transition> </transition>
</div> </div>
<div class="close-viewer mobile-only" <div class="close-viewer mobile-only"
@ -223,7 +223,7 @@ export default {
.trans-image { .trans-image {
&-enter-active, &-leave-active { &-enter-active, &-leave-active {
transition: opacity .5s; transition: opacity 1s;
} }
&-enter, &-leave-to { &-enter, &-leave-to {
@ -233,7 +233,7 @@ export default {
.trans-bg-image { .trans-bg-image {
&-enter-active, &-leave-active { &-enter-active, &-leave-active {
transition: opacity .3s; transition: opacity .8s;
} }
&-enter, &-leave-to { &-enter, &-leave-to {