Merge pull request #35 from teamseodo/feature/front-1631-custom-anima…

…tion-support-for-wowerlay Add Transition Support
wopehq · Feb 9, 2022 · 5d7500a · 5d7500a
2 parents f48cd3c + 473873e
commit 5d7500a
Show file tree

Hide file tree

Showing 8 changed files with 446 additions and 247 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,13 @@
+## 0.4.3
+
+- `(Add)` Custom transition support.
+### Demo
+
+- `(Add)` noTransition sample.
+- `(Add)` customTransition sample.
+
+<br>
+
 ## 0.4.2
 
 - `(Add)` [ResizeObserver](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver) support for supporting browsers.

diff --git a/README.md b/README.md
@@ -191,6 +191,12 @@ interface WowerlayProps {
    * @default false
    */
   noBackground: boolean;
+  /**
+   * Disable or set custom transition for Wowerlay
+   * @set {false} to disable transition
+   * @set {string} to use your own transition name (enter-to, enter-from, enter-active class animation name)
+   */
+  transition: string | boolean;
 }
 ```
 

diff --git a/demo/demo.scss b/demo/demo.scss
@@ -1,177 +1,194 @@
-@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap');
-@import url('https://fonts.googleapis.com/css2?family=Source+Code+Pro:wght@500&display=swap');
-
-$accentColor: rgb(28, 179, 255);
-$secondaryColor: #1a1a1a;
-
-html {
-  font-family: 'Roboto', sans-serif;
-  background-color: rgb(44, 44, 44);
-}
-* {
-  box-sizing: border-box;
-}
-
-::-webkit-scrollbar {
-  width: 5px;
-  height: 5px;
-
-  &-thumb {
-    background-color: gray;
-  }
-  &-track {
-    background-color: transparent;
-  }
-}
-
-.wowerlay {
-  background-color: $secondaryColor;
-  border-radius: 3px;
-  color: #fff;
-  box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.25);
-  padding: 15px;
-}
-
-.demo-container {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  height: 4000px;
-  width: 5000px;
-}
-
-.demo-content {
-  text-align: center;
-  width: 100%;
-}
-
-.demo-menu {
-  display: flex;
-  flex-flow: column nowrap;
-  position: fixed;
-  left: 10px;
-  top: 0;
-  bottom: 0;
-  margin: auto 0;
-  height: calc(100vh - 20px);
-  min-width: 200px;
-  border-radius: 10px;
-  box-shadow: 0px 0px 3px 1px rgba(0, 0, 0, 0.2);
-  background-color: $secondaryColor;
-  padding: 5px;
-
-  .demo-show-code-button {
-    position: absolute;
-    white-space: nowrap;
-    left: calc(100% + 10px);
-  }
-
-  .demo-menu-item {
-    width: 100%;
-    padding: 10px 10px;
-    border-radius: 10px;
-    font-size: 16px;
-    font-weight: 600;
-    color: rgb(121, 121, 121);
-    margin: 3px 0;
-    cursor: default;
-
-    &:hover {
-      color: rgb(160, 160, 160);
-      background-color: rgba(68, 68, 68, 0.1);
-    }
-
-    &.active {
-      background-color: rgba(68, 68, 68, 0.2);
-      text-shadow: 0px 0px 1px $accentColor;
-      font-weight: 900;
-      color: $accentColor;
-    }
-  }
-}
-
-::-webkit-scrollbar {
-  width: 5px;
-}
-::-webkit-scrollbar-thumb {
-  background-color: gray;
-  border-radius: 10px;
-}
-
-.hljs-tag {
-  color: #c9c9c9;
-}
-
-.vier-sheet {
-  max-width: 100% !important;
-  width: min-content !important;
-  &::after {
-    max-width: 100% !important;
-  }
-}
-
-.object {
-  display: inline-block;
-  background-color: $secondaryColor;
-  color: rgb(255, 255, 255);
-  box-shadow: 0px 0px 3px 1px rgba(0, 0, 0, 0.3);
-  border-radius: 5px;
-  padding: 7px;
-}
-
-input {
-  background-color: lighten($secondaryColor, 5);
-  color: #fff;
-  border-radius: 10px;
-  border: 1px solid transparent;
-  outline: none;
-  padding: 3px;
-
-  &[type='number'] {
-    width: 50px;
-    text-align: center;
-    appearance: none;
-  }
-
-  &:focus {
-    border-color: $accentColor;
-  }
-}
-
-button,
-select {
-  border-radius: 5px;
-  padding: 7px;
-  background-color: $secondaryColor;
-  border: 1px solid $accentColor;
-  color: $accentColor;
-  font-size: 15px;
-  transition: all 0.25s;
-  outline: none;
-
-  &:hover {
-    background-color: $accentColor;
-    color: $secondaryColor;
-  }
-}
-
-a {
-  color: $accentColor;
-  transition: text-shadow 0.15s ease-in-out;
-  text-decoration: none;
-
-  &:hover {
-    text-shadow: 0px 0px 4px $accentColor;
-  }
-}
-
-input::-webkit-outer-spin-button,
-input::-webkit-inner-spin-button {
-  -webkit-appearance: none;
-  margin: 0;
-}
-
-/* Firefox */
-input[type='number'] {
-  -moz-appearance: textfield;
-}
+@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Source+Code+Pro:wght@500&display=swap');
+
+$accentColor: rgb(28, 179, 255);
+$secondaryColor: #1a1a1a;
+
+html {
+  font-family: 'Roboto', sans-serif;
+  background-color: rgb(44, 44, 44);
+}
+* {
+  box-sizing: border-box;
+}
+
+::-webkit-scrollbar {
+  width: 5px;
+  height: 5px;
+
+  &-thumb {
+    background-color: gray;
+  }
+  &-track {
+    background-color: transparent;
+  }
+}
+
+.wowerlay {
+  background-color: $secondaryColor;
+  border-radius: 3px;
+  color: #fff;
+  box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.25);
+  padding: 15px;
+}
+
+.demo-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 4000px;
+  width: 5000px;
+}
+
+.demo-content {
+  text-align: center;
+  width: 100%;
+}
+
+.demo-menu {
+  display: flex;
+  flex-flow: column nowrap;
+  position: fixed;
+  left: 10px;
+  top: 0;
+  bottom: 0;
+  margin: auto 0;
+  height: calc(100vh - 20px);
+  min-width: 200px;
+  border-radius: 10px;
+  box-shadow: 0px 0px 3px 1px rgba(0, 0, 0, 0.2);
+  background-color: $secondaryColor;
+  padding: 5px;
+
+  .demo-show-code-button {
+    position: absolute;
+    white-space: nowrap;
+    left: calc(100% + 10px);
+  }
+
+  .demo-menu-item {
+    width: 100%;
+    padding: 10px 10px;
+    border-radius: 10px;
+    font-size: 16px;
+    font-weight: 600;
+    color: rgb(121, 121, 121);
+    margin: 3px 0;
+    cursor: default;
+
+    &:hover {
+      color: rgb(160, 160, 160);
+      background-color: rgba(68, 68, 68, 0.1);
+    }
+
+    &.active {
+      background-color: rgba(68, 68, 68, 0.2);
+      text-shadow: 0px 0px 1px $accentColor;
+      font-weight: 900;
+      color: $accentColor;
+    }
+  }
+}
+
+::-webkit-scrollbar {
+  width: 5px;
+}
+::-webkit-scrollbar-thumb {
+  background-color: gray;
+  border-radius: 10px;
+}
+
+.hljs-tag {
+  color: #c9c9c9;
+}
+
+.vier-sheet {
+  max-width: 100% !important;
+  width: min-content !important;
+  &::after {
+    max-width: 100% !important;
+  }
+}
+
+.object {
+  display: inline-block;
+  background-color: $secondaryColor;
+  color: rgb(255, 255, 255);
+  box-shadow: 0px 0px 3px 1px rgba(0, 0, 0, 0.3);
+  border-radius: 5px;
+  padding: 7px;
+}
+
+input {
+  background-color: lighten($secondaryColor, 5);
+  color: #fff;
+  border-radius: 10px;
+  border: 1px solid transparent;
+  outline: none;
+  padding: 3px;
+
+  &[type='number'] {
+    width: 50px;
+    text-align: center;
+    appearance: none;
+  }
+
+  &:focus {
+    border-color: $accentColor;
+  }
+}
+
+button,
+select {
+  border-radius: 5px;
+  padding: 7px;
+  background-color: $secondaryColor;
+  border: 1px solid $accentColor;
+  color: $accentColor;
+  font-size: 15px;
+  transition: all 0.25s;
+  outline: none;
+
+  &:hover {
+    background-color: $accentColor;
+    color: $secondaryColor;
+  }
+}
+
+a {
+  color: $accentColor;
+  transition: text-shadow 0.15s ease-in-out;
+  text-decoration: none;
+
+  &:hover {
+    text-shadow: 0px 0px 4px $accentColor;
+  }
+}
+
+input::-webkit-outer-spin-button,
+input::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+/* Firefox */
+input[type='number'] {
+  -moz-appearance: textfield;
+}
+
+.skew-enter-active,
+.skew-leave-active {
+  transition: transform 0.5s ease;
+  backface-visibility: hidden;
+  transform-origin: center top;
+}
+
+.skew-enter-from,
+.skew-leave-to {
+  transform: perspective(1000px) rotateX(180deg)
+}
+
+.skew-enter-to,
+.skew-leave-from {
+  transform: perspective(1000px) rotateX(0deg)
+}