Add subtle css animations for conv list

app/assets/stylesheets/administrate/utilities/_variables.scss

@@ -88,8 +88,8 @@ $woot-snackbar-bg: #323232;
 $woot-snackbar-button: #ffeb3b;
 
 $swift-ease-out-duration: .4s !default;
-$swift-ease-out-timing-function: cubic-bezier(.25, .8, .25, 1) !default;
+$swift-ease-out-function: cubic-bezier(.25, .8, .25, 1) !default;
-$swift-ease-out: all $swift-ease-out-duration $swift-ease-out-timing-function !default;
+$swift-ease-out: all $swift-ease-out-duration $swift-ease-out-function !default;
 
 // Ionicons
 $ionicons-font-path: '~ionicons/fonts';

app/javascript/dashboard/assets/scss/_variables.scss

@@ -88,8 +88,8 @@ $woot-snackbar-bg: #323232;
 $woot-snackbar-button: #ffeb3b;
 
 $swift-ease-out-duration: .4s !default;
-$swift-ease-out-timing-function: cubic-bezier(.25, .8, .25, 1) !default;
+$swift-ease-out-function: cubic-bezier(0.37, 0, 0.63, 1) !default;
-$swift-ease-out: all $swift-ease-out-duration $swift-ease-out-timing-function !default;
+$swift-ease-out: all $swift-ease-out-duration $swift-ease-out-function !default;
 
 // Ionicons
 $ionicons-font-path: '~ionicons/fonts';

app/javascript/dashboard/assets/scss/widgets/_conversation-card.scss

@@ -1,3 +1,15 @@
+@keyframes left-shift-animation {
+
+  0%,
+  100% {
+    transform: translateX(0);
+  }
+
+  50% {
+    transform: translateX(1px);
+  }
+}
+
 .conversation {
   @include flex;
   @include flex-shrink;
@@ -10,6 +22,7 @@
   position: relative;
 
   &.active {
+    animation: left-shift-animation .5s $swift-ease-out-function;
     background: $color-background;
     border-bottom-color: $color-border-light;
     border-left-color: $color-woot;
@@ -30,7 +43,7 @@
     }
   }
 
-  &:nth-last-child(2) {
+  &:last-child {
     .conversation--details {
       border-bottom-color: $color-border-light;
     }

app/javascript/dashboard/assets/scss/widgets/_conversation-view.scss

@@ -120,6 +120,21 @@
     @include scroll-on-hover;
   }
 
+  .conversation-transition-list-move {
+    transition: transform .3s $swift-ease-out-function;
+  }
+
+  .conversation-transition-list-enter-active,
+  .conversation-transition-list-leave-active {
+    transition: all .3s $swift-ease-out-function;
+  }
+
+  .conversation-transition-list-enter,
+  .conversation-transition-list-leave-to {
+    opacity: 0;
+    transform: translateX(10px);
+  }
+
   .chat-list__top {
     @include flex;
     @include padding($space-normal $zero $space-small $zero);

app/javascript/dashboard/assets/scss/widgets/_reply-box.scss

@@ -5,7 +5,7 @@
   margin: $space-normal;
   margin-top: 0;
   max-height: $space-mega * 3;
-  transition: box-shadow .35s $ease-in-out-cubic, height 2s $ease-in-out-cubic;
+  transition: box-shadow .35s $swift-ease-out-function, height 2s $swift-ease-out-function;
 
   &.is-focused {
     @include normal-shadow;
@@ -47,7 +47,7 @@
     &.is-private {
       background: lighten($warning-color, 38%);
 
-      > input {
+      >input {
         background: lighten($warning-color, 38%);
       }
     }
@@ -63,7 +63,7 @@
       }
     }
 
-    .file-uploads > label {
+    .file-uploads>label {
       cursor: pointer;
     }
 
@@ -73,7 +73,7 @@
       padding: 0 $space-small;
     }
 
-    > textarea {
+    >textarea {
       @include ghost-input();
       @include margin(0);
       background: transparent;
@@ -100,7 +100,7 @@
 
       .tabs-title {
         margin: 0;
-        transition: all .2s $ease-in-out-cubic;
+        transition: all .2s $swift-ease-out-function;
         transition-property: color, background;
 
         a {

app/javascript/dashboard/assets/scss/widgets/_tabs.scss

@@ -56,7 +56,7 @@
     display: flex;
     flex-direction: row;
     font-size: $font-size-small;
-    transition: all .15s $ease-in-out-cubic;
+    transition: all .15s $swift-ease-out-function;
   }
 
   &.is-active {

app/javascript/dashboard/assets/scss/widgets/_woot-tables.scss

@@ -24,7 +24,7 @@ table {
   tr {
     .show-if-hover {
       opacity: 0;
-      transition: all 0.2s $ease-in-out-cubic;
+      transition: all 0.2s $swift-ease-out-function;
     }
 
     &:hover {

app/javascript/dashboard/components/ChatList.vue

@@ -20,12 +20,14 @@
     </p>
 
     <div class="conversations-list">
-      <conversation-card
+      <transition-group name="conversation-transition-list" tag="div">
-        v-for="chat in conversationList"
+        <conversation-card
-        :key="chat.id"
+          v-for="chat in conversationList"
-        :active-label="label"
+          :key="chat.id"
-        :chat="chat"
+          :active-label="label"
-      />
+          :chat="chat"
+        />
+      </transition-group>
 
       <div v-if="chatListLoading" class="text-center">
         <span class="spinner"></span>

app/javascript/widget/assets/scss/_variables.scss

@@ -84,8 +84,8 @@ $woot-snackbar-bg: #323232;
 $woot-snackbar-button: #ffeb3b;
 
 $swift-ease-out-duration: .4s !default;
-$swift-ease-out-timing-function: cubic-bezier(.25, .8, .25, 1) !default;
+$swift-ease-out-function: cubic-bezier(.25, .8, .25, 1) !default;
-$swift-ease-out: all $swift-ease-out-duration $swift-ease-out-timing-function !default;
+$swift-ease-out: all $swift-ease-out-duration $swift-ease-out-function !default;
 
 $border-radius: 3px;
 $line-height: 1;