adding smoother animations

reord readme assets

Author: prabhuignoto

README.md

@@ -5,11 +5,11 @@
 ![Snyk Vulnerabilities for GitHub Repo](https://img.shields.io/snyk/vulnerabilities/github/prabhuignoto/float-menu)
 [![Depfu](https://badges.depfu.com/badges/3597df88718d346a7b41f08e31fe1331/overview.svg)](https://depfu.com/github/prabhuignoto/float-menu?project_id=15010)
 
-![logo](./src/readme-assets/logo.png)
+![logo](./readme-assets/logo.png)
 
 >Customizable Floating Menu for Vue 3
 
-![app-home](./src/readme-assets/app-home.png)
+![app-home](./readme-assets/app-home.png)
 
 ⚡ [Edit on Stackblitz](https://stackblitz.com/edit/vue-mkrnwq?file=src/App.vue)
 
@@ -50,7 +50,7 @@ The following snippet sets the default position of the menu as `top left` and de
 
 ## 📺 Demo
 
-![demo](./src/readme-assets/demo.gif)
+![demo](./readme-assets/demo.gif)
 
 ## Props
 
@@ -171,7 +171,7 @@ const menuData = [
   </float-menu>
 ```
 
-![example1](./src/readme-assets/example1.png)
+![example1](./readme-assets/example1.png)
 
 ### on-select
 
@@ -204,7 +204,7 @@ setting this prop `flips` the menu content on the right edges of the screen. Thi
   </float-menu>
 ```
 
-![flip](./src/readme-assets/flip.png)
+![flip](./readme-assets/flip.png)
 
 ### Custom icon
 
@@ -230,7 +230,7 @@ and here we render a custom text inside the Menu handle
   </float-menu>
 ```
 
-![example2](./src/readme-assets/example2.png)
+![example2](./readme-assets/example2.png)
 
 ## 🔨 Built with
 

package.json

@@ -23,7 +23,7 @@
     "@typescript-eslint/parser": "^4.2.0",
     "@vue/compiler-sfc": "^3.0.0",
     "eslint": "^7.9.0",
-    "eslint-plugin-vue": "^7.0.0-beta.3",
+    "eslint-plugin-vue": "^7.0.0-beta.4",
     "rollup": "^2.28.1",
     "rollup-plugin-buble": "^0.19.8",
     "rollup-plugin-commonjs": "^10.1.0",

src/readme-assets/app-home.png renamed to readme-assets/app-home.png

@@ -1,5 +1,11 @@
+$cubic: cubic-bezier(0.25, 0.46, 0.45, 0.94);
+
 .menu-head-wrapper {
   position: fixed;
+
+  &:not(.dragActive) {
+    transition: left 0.2s $cubic, right 0.2s $cubic, top 0.2s $cubic, bottom 0.2s $cubic;
+  }
 }
 
 .menu-head {
@@ -47,7 +53,7 @@
   background: #fff;
 
   &.menuActive {
-    animation: show 0.1s ease-in;
+    animation: show 0.15s $cubic;
     visibility: visible;
   }
 }
@@ -61,9 +67,11 @@
 @keyframes show {
   0% {
     opacity: 0;
+    transform: scale(0.95);
   }
 
   100% {
     opacity: 1;
+    transform: scale(1);
   }
 }