Added animations to issue boards

- Adds animation when opening & closing the sidebar
- Adds an animation when dragging boards to a new position
- Adds animations to dragging issues around

When opening the sidebar it will also animate the scrollLeft property to
make moving to the opened issue less blunt.

Closes #25630

app/assets/javascripts/boards/components/board.js.es6

@@ -50,9 +50,13 @@
             const left = boardsList.scrollLeft - this.$el.offsetLeft;
 
             if (right - boardsList.scrollLeft > 0) {
-              boardsList.scrollLeft = right;
+              $(boardsList).animate({
+                scrollLeft: right
+              }, 200);
             } else if (left > 0) {
-              boardsList.scrollLeft = this.$el.offsetLeft;
+              $(boardsList).animate({
+                scrollLeft: this.$el.offsetLeft
+              }, 200);
             }
           }
         },

app/assets/javascripts/boards/mixins/sortable_default_options.js.es6

@@ -20,6 +20,7 @@
 
   gl.issueBoards.getBoardSortableDefaultOptions = (obj) => {
     let defaultSortOptions = {
+      animation: 200,
       forceFallback: true,
       fallbackClass: 'is-dragging',
       fallbackOnBody: true,

app/assets/stylesheets/pages/boards.scss

@@ -74,6 +74,7 @@
     height: 475px; // Needed for PhantomJS
     height: calc(100vh - 220px);
     min-height: 475px;
+    transition: width .2s;
 
     &.is-compact {
       width: calc(100% - 290px);
@@ -338,3 +339,17 @@
     }
   }
 }
+
+.right-sidebar.right-sidebar-expanded {
+  &.boards-sidebar-slide-enter-active,
+  &.boards-sidebar-slide-leave-active {
+    transition: all .2s;
+  }
+
+  &.boards-sidebar-slide-enter,
+  &.boards-sidebar-slide-leave-active {
+    width: 0;
+    padding-left: 0;
+    padding-right: 0;
+  }
+}

app/views/projects/boards/components/_sidebar.html.haml

 %board-sidebar{ "inline-template" => true,
   ":current-user" => "#{current_user ? current_user.to_json(only: [:username, :id, :name], methods: [:avatar_url]) : {}}" }
+  %transition{ name: "boards-sidebar-slide" }
     %aside.right-sidebar.right-sidebar-expanded.issue-boards-sidebar{ "v-show" => "showSidebar" }
       .issuable-sidebar
         .block.issuable-sidebar-header

changelogs/unreleased/issue-boards-animate.yml

+---
+title: Added animations to issue boards interactions
+merge_request:
+author: