wordpress 下载站友情链接免费发布平台
Vue - 关于v-wave 波浪动画组件
这个动画库可以在标签中添加新的v-wave属性，来让点击标签元素后添加漂亮的波纹效果，并且可以根据父元素自动形成波纹的颜色，也可以自定义波纹颜色，持续时间，透明度，触发的对象等。
一、安装v-wave
npm i v-wave
Vue2引入：
import Vue from 'vue'
import VWave from 'v-wave'Vue.use(VWave)
Vue3引入：
import {createApp} from 'vue'
import VWave from 'v-wave'
import App from './App.vue'createApp(App).use(VWave).mount('#app')
通过CDN
<script src="https://unpkg.com/v-wave"></script>
# With a CDN, `VWave` is made available as a global
Vue.use(VWave)
二、如何使用
要使用该动画组件，只需将v-wave属性添加到需要波纹效果的元素标签中，也可以对象的形式去自定义波纹的效果。
默认演示效果如下：
<template><div class="box" v-wave>Click here</div>
</template><style scoped>
.box {display: grid;place-items: center;width: 200px;height: 200px;padding: 16px;box-shadow: 0px 0px 5px 1px #00000026;cursor: pointer;
}
</style>
自定义演示效果如下：
<template><divclass="box"v-wave="{color: 'blue',initialOpacity: 0.5,duration: 2,easing: 'ease-in',}">Click here</div>
</template><style scoped>
.box {display: grid;place-items: center;width: 200px;height: 200px;padding: 16px;box-shadow: 0px 0px 5px 1px #00000026;cursor: pointer;
}
</style>
使用触发器示例（父子元素）：
使用v-wave-trigger绑定在需要点击的子元素标签上，可触发父元素v-wave的动画效果。
<template><label v-wave class="text-input"><input type="text" placeholder="Search" /><imgv-wave-triggersrc="https://justintaddei.github.io/v-wave/imgs/search.svg"/></label>
</template><style scoped>
.text-input {display: grid;grid-template: 1fr / 1fr auto;place-items: center;padding: 0 16px;height: 48px;border: 2px solid #aaa;border-radius: 8px;font-size: 20px;
}
.text-input> input {border: none;outline: none;background: transparent;font-size: inherit;}
</style>
使用触发器示例（根据ID触发，支持多对多）：
设置v-wave-trigger:gridDemo，v-wave=“{trigger: ‘gridDemo’}”，可支持多对多关系，点击其中一个元素，相同trigger的元素也会同步触发。
<template><div class="waveGrid"><div class="box small" v-wave-trigger:gridDemo v-wave="{trigger: 'gridDemo',color:'blue',duration:1}" style=""></div>......<div class="box small" v-wave-trigger:gridDemo v-wave="{trigger: 'gridDemo',color:'blue',duration:1}" style=""></div></div>
</template><style scoped>
.waveGrid {display: inline-grid;grid-template: repeat(5, auto) / repeat(5, auto);place-items: center;gap: 32px;
}
.waveGrid .box.small {width: 50px;height: 50px;cursor: pointer;
}
.box {display: grid;place-items: center;width: 200px;height: 200px;padding: 16px;box-shadow: 0 4px 24px #00000026;cursor: pointer;
}
</style>
也可单击其中一个按钮将激活另一个按钮上的波浪：
<button v-wave="{trigger: 'button2'}" v-wave-trigger:button1>Button 1</button><button v-wave="{trigger: 'button1'}" v-wave-trigger:button2>Button 2</button>
三、组件参数Props
| 名称 | 默认值 | 类型 | 描述 |
|---|---|---|---|
| color | “currentColor” | string | 颜色 |
| initialOpacity | 0.2 | number | 涟漪首次出现时的不透明度 |
| finalOpacity | 0.1 | number | 当涟漪停止移动时，涟漪应该具有的不透明度 |
| duration | 0.4 | number | 涟漪的总持续时间，以秒为单位 |
| dissolveDuration | 0.15 | number | “溶解动画”的持续时间，以秒为单位 |
| waitForRelease | true | boolean | 鼠标释放点击之前，波纹不会溶解 |
| easing | ease-out | string | 过度定时函数，具体查看 |
| cancellationPeriod | 75 | number | 延迟，以毫秒为单位 |
| trigger | “auto” | string 、boolean 、“auto” | 设置与触发器一起使用时波纹的行为 |
| disabled | false | boolean | 无论 respectDisabledAttribute 如何，都禁用元素上的波形效果 |
| respectDisabledAttribute | true | boolean | 如果元素上存在 html 属性，则波形效果将被禁用 |
| respectPrefersReducedMotion | true | boolean | 如果用户的 prefers-reduced-motion 设置为true ，则波形效果将被禁用 |
| stopPropagation | false | boolean | 防止事件传播到父元素 |
| tagName | “div” | string | 设置用作波形容器的元素的标记名称。这在默认值可能会干扰或类似的选择器的情况下非常有用 |
v-wave动画组件能提供比较漂亮的点击波纹动画效果，且组件自定义比较高，可支持多对多触发关系，有兴趣的可以尝试下！
官网链接: v-wave官网
github地址: v-wave - github