edit-box animation styling

partials/GridEditor.vue

@@ -166,7 +166,7 @@
     position="bottom-right")
 
       div
-        q-carousel.q-py-sm(ref="carousel", v-model="slide", infinite, @input="getCarouselIcon(index)")
+        q-carousel.q-py-sm.carousel.transition-opacity(ref="carousel", v-model="slide", infinite, @input="getCarouselIcon(index)")
 
           //----- move
           q-carousel-slide.q-pa-sm
@@ -204,17 +204,18 @@
           q-carousel-slide.q-pa-sm.text-center
             .row.text-dark.items-center.full-height
 
-              .col.q-pl-xl.self-center
+              .col.self-center
                 q-btn.edit-cell-button(
                 @click="event => {handleCellContextMenuDelete(event, mobileSelectedCell)}",
                 flat, round, size="lg")
                   q-icon(name="delete")
 
-              .col.q-pr-xl.self-center
-                q-btn.edit-cell-button(
-                @click.prevent="handleModal()",
-                flat, round, size="lg")
-                  q-icon(name="edit")
+              //
+                .col.q-pr-xl.self-center
+                  q-btn.edit-cell-button(
+                  @click.prevent="handleModal()",
+                  flat, round, size="lg")
+                    q-icon(name="edit")
 
         //----- button: toggle edit-box
         q-btn.absolute-top-right.q-pr-sm.q-mr-xs(@click="carouselVisibility()",flat , no-ripple)
@@ -1143,15 +1144,24 @@
   .edit-box
     bottom -180px
 
+    .carousel
+      opacity 0
+
     &.show-minimized
       bottom -150px
 
     &.show-full
       bottom 0px
 
+      .carousel
+        opacity 1
+
   .transition-bottom
     transition bottom ease 350ms
 
+  .transition-opacity
+    transition opacity ease 350ms
+
 </style>
 
 <style lang="stylus">