feat(status bar): last log animation

Author: Guillaume Chau

packages/@vue/cli-ui/src/components/app/StatusBar.vue

@@ -40,11 +40,25 @@
         @click="onConsoleClick()"
       >
         <VueIcon icon="dvr"/>
-        <LoggerMessage class="last-message"
-          v-if="consoleLogLast"
-          :message="consoleLogLast"
-        />
-        <div v-else class="last-message">{{ $t('org.vue.components.status-bar.log.empty') }}</div>
+        <transition-group
+          name="slide-up"
+          duration="600"
+          tag="div"
+          class="last-message-container"
+        >
+          <LoggerMessage class="last-message"
+            v-if="consoleLogLast"
+            :key="consoleLogLast.id"
+            :message="consoleLogLast"
+          />
+          <div
+            v-else
+            key="__empty"
+            class="last-message no-log"
+          >
+            {{ $t('org.vue.components.status-bar.log.empty') }}
+          </div>
+        </transition-group>
       </div>
 
       <div
@@ -232,10 +246,21 @@ export default {
 
   .console-log
     &,
-    .last-message
+    .last-message-container
       flex 100% 1 1
       width 0
 
+    .last-message-container
+      overflow hidden
+      height 100%
+      position relative
+
+    .last-message
+      position absolute
+      left 0
+      top 4px
+      width 100%
+
     .logger-message
       font-size .9em
       padding-right 0
@@ -245,4 +270,8 @@ export default {
         color $vue-ui-color-light
         .vue-ui-dark-mode &
           color $vue-ui-color-dark
+
+    .no-log
+      padding 2px
+      opacity .5
 </style>

packages/@vue/cli-ui/src/style/transitions.styl

@@ -5,3 +5,17 @@
 .sidepane-enter,
 .sidepane-leave-to
   transform translateX(100%)
+
+.slide-up-enter-active,
+.slide-up-leave-active
+  transition transform .3s ease-out, opacity .3s
+
+.slide-up-enter,
+.slide-up-leave-to
+  opacity 0
+
+.slide-up-enter
+  transform translateY(100%)
+
+.slide-up-leave-to
+  transform translateY(-100%)