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

Merge pull request #216 from nasum/add-side-bar-transition-effect

Browse Source 
add side bar transition effect
This commit is contained in:
AkiraFukushima 2018-04-13 22:14:14 +09:00 committed by GitHub
commit ed0abf2034
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 18 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/renderer/components/TimelineSpace/Contents.vue
View File

@ -34,12 +34,14 @@ export default {
height: 100%;
width: 100%;
overflow: auto;
transition: all 0.5s;
}
.timeline-wrapper-with-side-bar {
height: 100%;
width: -webkit-calc(100% - 320px);
overflow: auto;
transition: all 0.5s;
}
}
</style>

22
src/renderer/components/TimelineSpace/Contents/SideBar.vue
View File

@ -1,11 +1,13 @@
<template>
<div id="side_bar" v-if="openSideBar">
<div class="header">
<i class="el-icon-close" @click="close"></i>
<transition name="slide-detail">
<div id="side_bar" v-if="openSideBar">
<div class="header">
<i class="el-icon-close" @click="close"></i>
</div>
<account-profile v-if="component === 1"></account-profile>
<toot-detail v-if="component === 2"></toot-detail>
</div>
<account-profile v-if="component === 1"></account-profile>
<toot-detail v-if="component === 2"></toot-detail>
</div>
</transition>
</template>
<script>
@ -55,4 +57,12 @@ export default {
}
}
}
.slide-detail-enter-active, .slide-detail-leave-active {
transition: all 0.5s;
}
.slide-detail-enter, .slide-detail-leave-to {
margin-right: -320px;
opacity: 0;
}
</style>