Animated log entries

app/imports/ui/creature/character/CharacterSheetRightDrawer.vue

@@ -5,15 +5,15 @@
     right
     clipped
   >
-    <log-tab :creature-id="$route.params.id" />
+    <character-log :creature-id="$route.params.id" />
   </v-navigation-drawer>
 </template>
 
 <script>
-import LogTab from '/imports/ui/log/CharacterLog.vue';
+import CharacterLog from '/imports/ui/log/CharacterLog.vue';
 export default {
   components: {
-    LogTab,
+    CharacterLog,
   },
   computed: {
     drawer: {

app/imports/ui/log/CharacterLog.vue

@@ -3,8 +3,10 @@
     style="height: 100%; overflow: hidden;"
     class="character-log layout column justify-end"
   >
-    <div
-      class="log flex layout column reverse align-end pa-3"
+    <v-slide-y-reverse-transition
+      group
+      hide-on-leave
+      class="log-entries flex layout column reverse align-end pa-3"
       style="overflow: auto;"
     >
       <log-entry
@@ -12,7 +14,7 @@
         :key="log._id"
         :model="log"
       />
-    </div>
+    </v-slide-y-reverse-transition>
     <v-card>
       <v-text-field
         v-model="input"
@@ -120,4 +122,10 @@ export default {
   .log-tab p:last-child {
     margin-bottom: 0;
   }
+  .theme--dark .log-entries {
+    background: #303030;
+  }
+  .log-entries {
+    background: #fafafa;
+  }
 </style>