add transition effect to image viewer
This commit is contained in:
parent
eccce5592c
commit
4ecef7d4e2
|
@ -1,4 +1,5 @@
|
||||||
<template>
|
<template>
|
||||||
|
<transition name="image-viewer">
|
||||||
<div id="image" v-if="modalOpen">
|
<div id="image" v-if="modalOpen">
|
||||||
<div class="image-wrapper" @keyup.esc.exact="close" tabindex="-1" ref="wrapper">
|
<div class="image-wrapper" @keyup.esc.exact="close" tabindex="-1" ref="wrapper">
|
||||||
<div class="image-header">
|
<div class="image-header">
|
||||||
|
@ -9,6 +10,7 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</transition>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
@ -71,4 +73,11 @@ export default {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.image-viewer-enter-active, .image-viewer-leave-active {
|
||||||
|
transition: opacity 0.5s;
|
||||||
|
}
|
||||||
|
.image-viewer-enter, .image-viewer-leave-to {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
Loading…
Reference in New Issue