Mastodon/Whalebird-desktop-client-mac-linux-windows
1
0
Fork 0
mirror of https://github.com/h3poteto/whalebird-desktop synced 2025-02-06 20:33:33 +01:00
Code Issues Releases Wiki Activity

add transition effect to image viewer

Browse Source
This commit is contained in:
nasum 2018-04-20 17:42:59 +09:00
parent eccce5592c
commit 4ecef7d4e2
1 changed files with 17 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
src/renderer/components/TimelineSpace/Modals/ImageViewer.vue
View File

@ -1,14 +1,16 @@
<template>
<div id="image" v-if="modalOpen">
<div class="image-wrapper" @keyup.esc.exact="close" tabindex="-1" ref="wrapper">
<div class="image-header">
<el-button type="text" icon="el-icon-close" @click="close" class="close-button"></el-button>
</div>
<div class="image-content">
<img :src="imageURL">
<transition name="image-viewer">
<div id="image" v-if="modalOpen">
<div class="image-wrapper" @keyup.esc.exact="close" tabindex="-1" ref="wrapper">
<div class="image-header">
<el-button type="text" icon="el-icon-close" @click="close" class="close-button"></el-button>
</div>
<div class="image-content">
<img :src="imageURL">
</div>
</div>
</div>
</div>
</transition>
</template>
<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>