From 14d83dd19dedfd9f94f251617cc9596429be8cea Mon Sep 17 00:00:00 2001
From: xianfuxing <xianfuxing@126.com>
Date: Thu, 23 Aug 2018 23:31:17 +0800
Subject: [PATCH] # add screen animation

---
 src/views/counter/detail.vue | 22 +++++++++++++++-------
 1 file changed, 15 insertions(+), 7 deletions(-)

diff --git a/src/views/counter/detail.vue b/src/views/counter/detail.vue
index 91691d1..7d1ae3e 100644
--- a/src/views/counter/detail.vue
+++ b/src/views/counter/detail.vue
@@ -2,12 +2,15 @@
   <div class="app-container">
     <el-tabs v-model="activeName" @tab-click="handleTabClick">
       <el-tab-pane label="显示屏" name="screen">
-        <screen 
-          :deviceID="this.$store.getters.deviceID"
-          :lastItem="lastItem"
-          :status="status"
-          v-if="flag"
-        ></screen>
+        <transition>
+          <screen 
+            :deviceID="this.$store.getters.deviceID"
+            :lastItem="lastItem"
+            :status="status"
+            v-if="flag"
+          >
+          </screen>
+        </transition>
       </el-tab-pane>
       <el-tab-pane label="趋势图" name="chart">
         <el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
@@ -155,5 +158,10 @@ export default {
 </script>
 
 <style lang="scss">
-
+    .v-enter, .v-leave-to {
+      opacity: 0;
+    }
+  .v-enter-active, .v-leave-active {
+    transition: opacity 1.5s
+  }
 </style>