Merge pull request #2256 from Aekal/feature/transitions

Feature/transitions

CHANGELOG.md

@@ -8,7 +8,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Added
 - Hotjar extension (#840)
-- Events list page in docs (#776)
+- Slide animations to menu, search, wishlist and minicart components
+- Events list page in docs (#776
 
 ### Changed
 - IndexedDb changed to LocalStorage + ServiceWorker native caching (#2112)

src/themes/default/components/core/blocks/Microcart/Microcart.vue

@@ -1,7 +1,7 @@
 <template>
   <div
     class="microcart mw-100 fixed cl-accent"
-    :class="[productsInCart.length ? 'bg-cl-secondary' : 'bg-cl-primary', { active: showMicrocart }]"
+    :class="[productsInCart.length ? 'bg-cl-secondary' : 'bg-cl-primary']"
     data-testid="microcart"
   >
     <div class="row middle-xs bg-cl-primary top-sm">
@@ -146,11 +146,6 @@ export default {
       default: () => false
     }
   },
-  computed: {
-    showMicrocart () {
-      return this.isMicrocartOpen && this.componentLoaded
-    }
-  },
   mounted () {
     this.$nextTick(() => {
       this.componentLoaded = true
@@ -198,13 +193,8 @@ export default {
     height: 100%;
     width: 800px;
     min-width: 320px;
-    transform: translateX(100%);
-    transition: transform 300ms $motion-main;
     overflow-y: auto;
     overflow-x: hidden;
-    &.active {
-      transform: translateX(0)
-    }
   }
 
   .close {

src/themes/default/components/core/blocks/SearchPanel/SearchPanel.vue

@@ -1,7 +1,6 @@
 <template>
   <div
     class="searchpanel fixed mw-100 bg-cl-primary cl-accent"
-    :class="{ active: showPanel }"
     data-testid="searchPanel"
   >
     <div class="close-icon-row">
@@ -86,8 +85,6 @@ export default {
   top: 0;
   right: 0;
   z-index: 3;
-  transform: translateX(100%);
-  transition: transform 300ms $motion-main;
   overflow-y: auto;
   overflow-x: hidden;
 
@@ -143,10 +140,6 @@ export default {
     }
   }
 
-  &.active {
-    transform: translateX(0);
-  }
-
   .close-icon {
     padding: 18px 8px;
   }

src/themes/default/components/core/blocks/SidebarMenu/SidebarMenu.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="sidebar-menu fixed mw-100 bg-cl-secondary" :class="{ active: showMenu }">
+  <div class="sidebar-menu fixed mw-100 bg-cl-secondary">
     <div class="row brdr-bottom-1 brdr-cl-bg-secondary">
       <div class="col-xs bg-cl-primary" v-if="submenu.depth">
         <sub-btn type="back" class="bg-cl-transparent brdr-none" />
@@ -186,9 +186,6 @@ export default {
     },
     isCurrentMenuShowed () {
       return !this.getSubmenu || !this.getSubmenu.depth
-    },
-    showMenu () {
-      return this.isOpen && this.componentLoaded
     }
   },
   mounted () {
@@ -221,18 +218,12 @@ $color-mine-shaft: color(mine-shaft);
   left: 0;
   overflow: hidden;
   overflow-y: auto;
-  transform: translateX(-100%);
   z-index: 3;
-  transition: transform $duration-main $motion-main;
 
   @media (max-width: 767px) {
     width: 100vh;
   }
 
-  &.active {
-    transform: translateX(0);
-  }
-
   &__list {
     transition: transform $duration-main $motion-main;
   }

src/themes/default/layouts/Default.vue

@@ -3,11 +3,15 @@
     <overlay v-if="overlayActive"/>
     <loader/>
     <div id="viewport" class="w-100 relative">
-      <microcart v-if="isMicrocartOpen"/>
-      <search-panel v-if="isSearchPanelOpen"/>
-      <wishlist v-if="isWishlistOpen"/>
-      <sidebar-menu v-if="isSidebarOpen"/>
       <main-header/>
+      <transition name="slide-right">
+        <sidebar-menu v-if="isSidebarOpen"/>
+      </transition>
+      <transition name="slide-left">
+        <microcart v-if="isMicrocartOpen"/>
+        <search-panel v-if="isSearchPanelOpen"/>
+        <wishlist v-if="isWishlistOpen"/>
+      </transition>
       <slot/>
       <main-footer/>
       <notification/>
@@ -101,6 +105,22 @@ export default {
 }
 </script>
 
-<style lang="scss" src="theme/css/main.scss">
+<style lang="scss" src="theme/css/main.scss"></style>
+<style lang="scss" scoped>
+  .slide-left-enter-active,
+  .slide-left-leave-active,
+  .slide-right-enter-active,
+  .slide-right-leave-active {
+    transition: transform .25s;
+  }
+
+  .slide-left-enter,
+  .slide-left-leave-to {
+    transform: translateX(100%);
+  }
 
+  .slide-right-enter,
+  .slide-right-leave-to {
+    transform: translateX(-100%);
+  }
 </style>