Add transitions for the explore view containers

src/components/Explore.vue

@@ -10,7 +10,9 @@
     </div>
     <Statblock :subject="world.player" :initiative="0" />
     <div class="explore-containers">
-      <ContainerView :container="container" v-for="(container, index) in world.player.containers" :key="'explore-container-' + index" />
+      <transition-group name="container">
+        <ContainerView v-show="container.contents.concat(container.digested).length > 0" :container="container" v-for="(container, index) in world.player.containers" :key="'explore-container-' + index" />
+      </transition-group>
     </div>
     <div class="explore-info">
       <h2 class="location-name">{{ location.name.capital }}</h2>
@@ -112,14 +114,14 @@ export default class Explore extends Vue {
 .explore-containers {
   grid-area: containers;
   display: flex;
-  flex-direction: row;
+  flex-direction: column;
   flex-wrap: wrap;
   overflow-x: hidden;
-  justify-content: flex-end;
 }
 
 .explore-containers > .vore-container {
   flex-basis: 25%;
+  max-height: 125px;
 }
 
 .explore-log {
@@ -191,6 +193,24 @@ export default class Explore extends Vue {
   flex-direction: column;
   overflow-y: scroll;
 }
+
+.container-enter {
+  opacity: 0;
+}
+
+.container-enter-active {
+  transition: opacity 2s;
+}
+
+.container-move {
+  transition: transform 1s;
+}
+
+.container-leave-active {
+  transition: opacity 5s;
+  opacity: 0;
+}
+
 </style>
 
 <style>