Add some card effects

README.MD

@@ -70,3 +70,13 @@ Vue.use(VueBottomSheet);
 | click-to-close  | Boolean  | Click outside card to close  | `:click-to-close="false"` |
 | max-width  | String  | Set max-width of component card  | `max-width="640px"` |
 | max-height  | String  | Set max-height of component card  | `max-height="90%"` |
+| effect  | String  | Set effect for component card  | `effect="fx-fadein-scale"` |
+
+### List of effects
+
+- fx-default
+- fx-fadein-scale
+- fx-slide-from-right
+- fx-slide-from-left
+
+You can see all the effects on the [demo page](https://webzlodimir.github.io/vue-bottom-sheet-demo/)

README_RU.MD

@@ -70,3 +70,13 @@ Vue.use(VueBottomSheet);
 | click-to-close  | Boolean  | Клик вне карточки закрывает компонент  | `:click-to-close="false"` |
 | max-width  | String  | Устанавливает максимальную ширину карточки компонента  | `max-width="640px"` |
 | max-height  | String  | Устанавливает максимальную высоту карточки компонента  | `max-height="90%"` |
+| effect  | String  | Устанавливает эффект появление карточки компонента  | `effect="fx-fadein-scale"` |
+
+### Список эффектов
+
+- fx-default
+- fx-fadein-scale
+- fx-slide-from-right
+- fx-slide-from-left
+
+Вы можете посмотреть все эффекты на [демо странице](https://webzlodimir.github.io/vue-bottom-sheet-demo/)

dev/dev.vue

@@ -57,6 +57,24 @@
               class="form-control"
             />
           </div>
+          <div class="form-group mb-3">
+            <label for="effectSelect" class="form-label">Effects:</label>
+            <select
+              v-model="effect"
+              class="form-select"
+              name="effectSelect"
+              id="effectSelect"
+            >
+              <option selected value="fx-default">fx-default</option>
+              <option selected value="fx-fadein-scale">fx-fadein-scale</option>
+              <option selected value="fx-slide-from-right"
+                >fx-slide-from-right</option
+              >
+              <option selected value="fx-slide-from-left"
+                >fx-slide-from-left</option
+              >
+            </select>
+          </div>
         </div>
       </div>
       <button class="btn btn-primary" type="button" @click="open">
@@ -67,6 +85,7 @@
         :max-height="maxHeight"
         :overlay="overlay"
         :click-to-close="clickToClose"
+        :effect="effect"
         ref="myBottomSheet"
       >
         <div class="sheet-content">
@@ -104,7 +123,8 @@ export default {
       overlay: true,
       maxWidth: "640px",
       maxHeight: "90%",
-      clickToClose: true
+      clickToClose: true,
+      effect: "fx-default"
     };
   },
   components: {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webzlodimir/vue-bottom-sheet",
-  "version": "1.1.1",
+  "version": "1.1.2",
   "description": "",
   "main": "dist/vue-bottom-sheet.js",
   "scripts": {

src/components/VueBottomSheet.vue

@@ -12,7 +12,7 @@
     <div v-if="overlay" class="bottom-sheet__backdrop"></div>
     <div
       :style="{ bottom: cardP, maxWidth: maxWidth, maxHeight: maxHeight }"
-      :class="{ stripe: stripe }"
+      :class="[{ stripe: stripe }, effect]"
       ref="bottomSheetCard"
       class="bottom-sheet__card"
     >
@@ -62,6 +62,10 @@ export default {
     clickToClose: {
       type: Boolean,
       default: true
+    },
+    effect: {
+      type: String,
+      default: "fx-slide-from-left"
     }
   },
   mounted() {
@@ -73,7 +77,11 @@ export default {
 
     this.cardH = this.$refs.bottomSheetCard.clientHeight;
     this.contentH = `${this.cardH - this.$refs.pan.clientHeight}px`;
-    this.cardP = `-${this.cardH + this.stripe}px`;
+    this.cardP =
+      this.effect === "fx-slide-from-right" ||
+      this.effect === "fx-slide-from-left"
+        ? 0
+        : `-${this.cardH + this.stripe}px`;
 
     this.mc = new Hammer(this.$refs.pan);
     this.mc.get("pan").set({ direction: Hammer.DIRECTION_ALL });
@@ -104,7 +112,11 @@ export default {
     },
     close() {
       this.opened = false;
-      this.cardP = `-${this.cardH + this.stripe}px`;
+      this.cardP =
+        this.effect === "fx-slide-from-right" ||
+        this.effect === "fx-slide-from-left"
+          ? 0
+          : `-${this.cardH + this.stripe}px`;
     },
     clickOnBottomSheet(event) {
       const clickedBlock = event.target;
@@ -127,6 +139,7 @@ export default {
 <style lang="scss" scoped>
 .bottom-sheet {
   z-index: 99999;
+  transition: all 0.4s ease;
 
   &__content {
     overflow-y: scroll;
@@ -151,14 +164,35 @@ export default {
     background: white;
     border-radius: 14px 14px 0 0;
     left: 50%;
-    transform: translate(-50%, 0);
     z-index: 9999;
-    transition: bottom 0.3s ease;
     margin: 0 auto;
 
     &.stripe {
       padding-bottom: 20px;
     }
+
+    &.fx-default {
+      transform: translate(-50%, 0);
+      transition: bottom 0.3s ease;
+    }
+
+    &.fx-fadein-scale {
+      transform: translate(-50%, 0) scale(0.7);
+      opacity: 0;
+      transition: all 0.3s;
+    }
+
+    &.fx-slide-from-right {
+      transform: translate(100%, 0);
+      opacity: 0;
+      transition: all 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9);
+    }
+
+    &.fx-slide-from-left {
+      transform: translate(-100%, 0);
+      opacity: 0;
+      transition: all 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9);
+    }
   }
 
   &__pan {
@@ -178,6 +212,8 @@ export default {
   }
 
   &.closed {
+    opacity: 0;
+    visibility: hidden;
     .bottom-sheet__backdrop {
       animation: hide 0.3s ease;
     }
@@ -201,6 +237,21 @@ export default {
       opacity: 1;
       visibility: visible;
     }
+
+    .bottom-sheet__card {
+      &.fx-fadein-scale {
+        transform: translate(-50%, 0) scale(1);
+        opacity: 1;
+      }
+      &.fx-slide-from-right {
+        transform: translate(-50%, 0);
+        opacity: 1;
+      }
+      &.fx-slide-from-left {
+        transform: translate(-50%, 0);
+        opacity: 1;
+      }
+    }
   }
 }