From bbfccb0bbfbe4720e1df11559172f369c085c56d Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Tue, 12 Jun 2018 02:03:18 +0900
Subject: [PATCH] :art:

---
 src/client/app/common/views/widgets/hashtags.vue | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/src/client/app/common/views/widgets/hashtags.vue b/src/client/app/common/views/widgets/hashtags.vue
index 8c9ca5d419..1f1e6ceb52 100644
--- a/src/client/app/common/views/widgets/hashtags.vue
+++ b/src/client/app/common/views/widgets/hashtags.vue
@@ -5,7 +5,7 @@
 
 		<div class="mkw-hashtags--body" :data-mobile="platform == 'mobile'">
 			<p class="fetching" v-if="fetching">%fa:spinner .pulse .fw%%i18n:common.loading%<mk-ellipsis/></p>
-			<div v-else>
+			<transition-group v-else tag="div" name="chart">
 				<div v-for="stat in stats" :key="stat.tag">
 					<div class="tag">
 						<router-link :to="`/tags/${ stat.tag }`" :title="stat.tag">#{{ stat.tag }}</router-link>
@@ -13,7 +13,7 @@
 					</div>
 					<x-chart class="chart" :src="stat.chart"/>
 				</div>
-			</div>
+			</transition-group>
 		</div>
 	</mk-widget-container>
 </div>
@@ -74,6 +74,14 @@ root(isDark)
 				margin-right 4px
 
 		> div
+			.chart-enter
+			.chart-leave-to
+				opacity 0
+				transform translateY(-30px)
+
+			> *
+				transition transform .3s ease, opacity .3s ease
+
 			> div
 				display flex
 				align-items center