button-animation - npm Package Compare versions

Comparing version 1.0.5 to 1.0.6

btnAnimation.js

@@ -40,2 +40,82 @@ export function buttonAnimation (e,color='#fff') {
     }, 500)
+}
+export function buttonAnimation (c, bg = '#ff7242', dire = 'left') {
+    const style = document.createElement('style')
+    const dom = document.querySelector(`.${c}`)
+    if (dire == 'right') {
+        style.innerHTML =
+            `.${c}{\n` +
+            '  position: relative;\n' +
+            '  transition: color 1s;\n' +
+            '  overflow: hidden;\n' +
+            '  z-index: 1;\n' +
+            '}\n' +
+            `.${c}::before {\n` +
+            '  position: absolute;\n' +
+            '  top: 0;\n' +
+            '  right: 0;\n' +
+            '  bottom: 0;\n' +
+            '  left: 0;\n' +
+            '  z-index: -1;\n' +
+            `  content: '';\n` +
+            `  background: ${bg};\n` +
+            '  transition: transform 0.5s ease-out;\n' +
+            '  transform: scaleX(0);\n' +
+            '  transform-origin:100% 0;\n' +
+            '}\n' +
+            `.${c}:hover:before{\n` +
+            '  transform: scaleX(1);\n' +
+            '}\n'
+    }
+    else if (dire == 'center') {
+        style.innerHTML =
+            `.${c}{\n` +
+            '  position: relative;\n' +
+            '  transition: color 1s;\n' +
+            '  overflow: hidden;\n' +
+            '  z-index: 1;\n' +
+            '}\n' +
+            `.${c}::before {\n` +
+            '  position: absolute;\n' +
+            '  top: 0;\n' +
+            '  right: 0;\n' +
+            '  bottom: 0;\n' +
+            '  left: 0;\n' +
+            '  z-index: -1;\n' +
+            `  content: '';\n` +
+            `  background: ${bg};\n` +
+            '  transition: transform 0.5s ease-out;\n' +
+            '  transform: scaleX(0);\n' +
+            '}\n' +
+            `.${c}:hover:before{\n` +
+            '  transform: scaleX(1);\n' +
+            '}\n'
+    }
+    else {
+        style.innerHTML =
+            `.${c}{\n` +
+            '  position: relative;\n' +
+            '  transition: color 1s;\n' +
+            '  overflow: hidden;\n' +
+            '  z-index: 1;\n' +
+            '}\n' +
+            `.${c}::before {\n` +
+            '  position: absolute;\n' +
+            '  top: 0;\n' +
+            '  right: 0;\n' +
+            `  bottom: 0;\n` +
+            '  left: 0;\n' +
+            '  z-index: -1;\n' +
+            `  content: '';\n` +
+            `  background: ${bg};\n` +
+            '  transition: transform 0.5s ease-out;\n' +
+            '  transform: scaleX(0);\n' +
+            '  transform-origin:0 50%;\n' +
+            '}\n' +
+            `.${c}:hover:before{\n` +
+            '  transform: scaleX(1);\n' +
+            '}\n'
+    }
+    dom.appendChild(style)
+    dom.classList.add('buttonHover')
 }

package.json

 {
   "name": "button-animation",
-  "version": "1.0.5",
-  "description": "一个b站上学习到的按钮点击动画",
+  "version": "1.0.6",
+  "description": "b站上学习到的按钮点击动画",
   "main": "btnAnimation.js",
@@ -6,0 +6,0 @@ "scripts": {

README.md

 # 演示效果
 
+## 1.按钮点击产生波纹
+
 https://img12.360buyimg.com/ddimg/jfs/t1/191685/13/18463/235002/61190b62E79e52c3f/6fa7428e9032ac56.gif
 
-# 使用步骤
+## 2.按钮悬浮开始变色
 
-1.install
+https://img11.360buyimg.com/ddimg/jfs/t1/206228/40/1399/141495/61192b9dE71596c97/5680e5f5ba0a549f.gif
 
+# install
+
 ```bash
@@ -13,4 +17,6 @@ npm i -s button-animation
 
-2.import
+## 1.buttonAnimation
 
+import
+
 ```js
@@ -20,3 +26,3 @@ import { buttonAnimation } from "button-animation";
 
-3.绑定点击事件,需要传入 event
+绑定点击事件,需要传入 event
 
@@ -29,3 +35,3 @@ ```js
 
-4.波纹颜色默认为#333，接收第二个参数修改波纹颜色
+波纹颜色默认为#333，接收第二个参数修改波纹颜色
 
@@ -40,3 +46,3 @@ ```js
 
-# 示例 demo
+## 示例 demo
 
@@ -95,3 +101,86 @@ ```vue
 
-注意
+## 注意
+
 button 的 css 会被设置为 position:relative;overflow:hidden;
+
+## 2.buttonHover
+
+import
+
+```js
+import { buttonHover } from "button-animation";
+```
+
+mounted生命周期中注册，接收三个参数，第一个为button类名，第二个为动画颜色，第三个为动画方向
+
+```js
+  mounted () {
+        buttonHover('button', '#ff7242', 'left')
+        buttonHover('button1', '#ff7242', 'center')
+        buttonHover('button2', '#ff7242', 'right')
+    },
+```
+
+## 示例 demo
+
+```vue
+<template>
+    <article class="buttons">
+        <button class="button">Button
+        </button>
+        <button class="button1">Button
+        </button>
+        <button class="button2">Button
+        </button>
+    </article>
+</template>
+
+<script >
+import { buttonHover } from "button-animation";
+export default {
+    mounted () {
+        buttonHover('button', '#ff7242', 'left')
+        buttonHover('button1', '#ff7242', 'center')
+        buttonHover('button2', '#ff7242', 'right')
+    }
+}
+</script>
+
+<style>
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+body {
+    margin: 0;
+    background-color: #350048;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+}
+button {
+    border: none;
+    outline: none;
+    color: #fff;
+    border-radius: 45px;
+    margin: 0 15px;
+    padding: 14px 40px;
+    font-size: 30px;
+    font-weight: 400;
+    background: linear-gradient(90deg, #6616d0, #ac34e7);
+    box-shadow: 3px 5px rgba(0, 0, 0, 0.1);
+    border-top: 1px solid rgba(0, 0, 0, 1);
+}
+button:nth-child(2) {
+    background: linear-gradient(90deg, #025ce3, #4e94fd);
+}
+</style>
+```
+
+## 注意
+
+button 的 css 会被设置为 position:relative;overflow:hidden;
+
+## 

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

7886

increased by140.28%

Lines of code

119

increased by205.13%

Number of lines in readme file

182

increased by95.7%

No dependency changes