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

add transition effect to image viewer

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