allow animating both the new issue form, and the list below it

disable animations for now

app/assets/javascripts/boards/components/board_list.js

@@ -163,20 +163,21 @@ export default {
     this.$refs.list.removeEventListener('scroll', this.onScroll);
   },
   template: `
-    <div class="board-list-component">
+    <transition-group tag="div" class="board-list-component">
       <div
+        key="loading"
         class="board-list-loading text-center"
         aria-label="Loading issues"
         v-if="loading">
         <loading-icon />
       </div>
-      <transition name="slide-down">
-        <board-new-issue
-          :group-id="groupId"
-          :list="list"
-          v-if="list.type !== 'closed' && showIssueForm"/>
-      </transition>
+      <board-new-issue
+        key="newIssue"
+        :group-id="groupId"
+        :list="list"
+        v-if="list.type !== 'closed' && showIssueForm"/>
       <ul
+        key="list"
         class="board-list"
         v-show="!loading"
         ref="list"
@@ -211,6 +212,6 @@ export default {
           </span>
         </li>
       </ul>
-    </div>
+    </transition-group>
   `,
 };

app/assets/javascripts/boards/components/board_new_issue.js

@@ -23,7 +23,6 @@ export default {
       title: '',
       loading: true,
       selectedProject: {},
-      projects: [],
       error: false,
     };
   },
@@ -126,67 +125,71 @@ export default {
     }
   },
   template: `
-    <div class="card board-new-issue-form">
-      <form @submit="submit($event)">
-        <div class="flash-container"
-          v-if="error">
-          <div class="flash-alert">
-            An error occured. Please try again.
+    <div class="board-new-issue-form">
+      <div class="card">
+        <form @submit="submit($event)">
+          <div class="flash-container"
+            v-if="error">
+            <div class="flash-alert">
+              An error occured. Please try again.
+            </div>
           </div>
-        </div>
-        <label class="label-light"
-          :for="list.id + '-title'">
-          Title
-        </label>
-        <input class="form-control"
-          type="text"
-          v-model="title"
-          ref="input"
-          autocomplete="off"
-          :id="list.id + '-title'" />
-        <template v-if="groupId">
-          <label class="label-light prepend-top-10"
-            :for="list.id + '-project'">
-            Project
+          <label class="label-light"
+            :for="list.id + '-title'">
+            Title
           </label>
-          <div ref="projectsDropdown" class="dropdown">
-            <button
-              class="dropdown-menu-toggle wide"
-              type="button"
-              data-toggle="dropdown"
-              aria-expanded="false">
-              {{ selectedProjectName }}
-              <i class="fa fa-chevron-down" aria-hidden="true"></i>
-            </button>
-            <div class="dropdown-menu dropdown-menu-selectable dropdown-menu-full-width">
-              <div class="dropdown-title">
-                <span>Projects</span>
-                <button aria-label="Close" type="button" class="dropdown-title-button dropdown-menu-close">
-                  <i aria-hidden="true" data-hidden="true" class="fa fa-times dropdown-menu-close-icon"></i>
-                </button>
-              </div>
-              <div class="dropdown-input">
-                <input class="dropdown-input-field">
+          <input class="form-control"
+            type="text"
+            v-model="title"
+            ref="input"
+            autocomplete="off"
+            :id="list.id + '-title'" />
+          <template v-if="groupId">
+            <label class="label-light prepend-top-10"
+              :for="list.id + '-project'">
+              Project
+            </label>
+            <div ref="projectsDropdown" class="dropdown">
+              <button
+                class="dropdown-menu-toggle wide"
+                type="button"
+                data-toggle="dropdown"
+                aria-expanded="false">
+                {{ selectedProjectName }}
+                <i class="fa fa-chevron-down" aria-hidden="true"></i>
+              </button>
+              <div class="dropdown-menu dropdown-menu-selectable dropdown-menu-full-width">
+                <div class="dropdown-title">
+                  <span>Projects</span>
+                  <button aria-label="Close" type="button" class="dropdown-title-button dropdown-menu-close">
+                    <i aria-hidden="true" data-hidden="true" class="fa fa-times dropdown-menu-close-icon"></i>
+                  </button>
+                </div>
+                <div class="dropdown-input">
+                  <input class="dropdown-input-field">
+                </div>
+                <div class="dropdown-content"></div>
+                <div class="dropdown-loading">
+                  <loading-icon />
+                </div>
               </div>
-              <div class="dropdown-content"></div>
-              <div class="dropdown-loading"></div>
             </div>
+          </template>
+          <div class="clearfix prepend-top-10">
+            <button class="btn btn-success pull-left"
+              type="submit"
+              :disabled="disabled"
+              ref="submit-button">
+              Submit issue
+            </button>
+            <button class="btn btn-default pull-right"
+              type="button"
+              @click="cancel">
+              Cancel
+            </button>
           </div>
-        </template>
-        <div class="clearfix prepend-top-10">
-          <button class="btn btn-success pull-left"
-            type="submit"
-            :disabled="disabled"
-            ref="submit-button">
-            Submit issue
-          </button>
-          <button class="btn btn-default pull-right"
-            type="button"
-            @click="cancel">
-            Cancel
-          </button>
-        </div>
-      </form>
+        </form>
+      </div>
     </div>
   `,
 };

app/assets/stylesheets/pages/boards.scss

@@ -262,43 +262,10 @@
   }
 }
 
-.slide-down-enter {
-  transform: translateY(-100%);
-}
-
-.slide-down-enter-active {
-  transition: transform $fade-in-duration;
-
-  + .board-list {
-    transform: translateY(-136px);
-    transition: none;
-  }
-}
-
-.slide-down-enter-to {
-  + .board-list {
-    transform: translateY(0);
-    transition: transform $fade-in-duration ease;
-  }
-}
-
-.slide-down-leave {
-  transform: translateY(0);
-}
-
-.slide-down-leave-active {
-  transition: all $fade-in-duration;
-  transform: translateY(-136px);
-
-  + .board-list {
-    transition: transform $fade-in-duration ease;
-    transform: translateY(-136px);
-  }
-}
-
 .board-list-component {
   height: calc(100% - 49px);
   overflow: hidden;
+  position: relative;
 }
 
 .board-list {