From 9f9b85843534293f09d084036dd2ab0fa8a7f280 Mon Sep 17 00:00:00 2001
From: nasum <masaya.nasu@crowdworks.co.jp>
Date: Fri, 13 Apr 2018 18:01:19 +0900
Subject: [PATCH] add side bar transition effect

---
 .../components/TimelineSpace/Contents.vue     |  2 ++
 .../TimelineSpace/Contents/SideBar.vue        | 22 ++++++++++++++-----
 2 files changed, 18 insertions(+), 6 deletions(-)

diff --git a/src/renderer/components/TimelineSpace/Contents.vue b/src/renderer/components/TimelineSpace/Contents.vue
index a3acb815..f238596f 100644
--- a/src/renderer/components/TimelineSpace/Contents.vue
+++ b/src/renderer/components/TimelineSpace/Contents.vue
@@ -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>
diff --git a/src/renderer/components/TimelineSpace/Contents/SideBar.vue b/src/renderer/components/TimelineSpace/Contents/SideBar.vue
index abf23331..939f38ce 100644
--- a/src/renderer/components/TimelineSpace/Contents/SideBar.vue
+++ b/src/renderer/components/TimelineSpace/Contents/SideBar.vue
@@ -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>