Mastodon
/
Whalebird-desktop-client-mac-linux-windows
mirror of https://github.com/h3poteto/whalebird-desktop
1
0
Fork 0
Code Issues Releases Wiki Activity

Merge pull request #249 from nasum/add-image-viewer-transition 

Add image viewer transition
This commit is contained in:
AkiraFukushima 2018-04-20 21:24:20 +09:00 committed by GitHub
parent eccce5592c 4bf823d76b
commit efbb60fe71
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
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" @click="close">
<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>