浙江网站建设服务公司,wordpress 字母标签页,wordpress怎么设置主题,东营推广营销公司Vue - 关于v-wave 波浪动画组件
这个动画库可以在标签中添加新的v-wave属性#xff0c;来让点击标签元素后添加漂亮的波纹效果#xff0c;并且可以根据父元素自动形成波纹的颜色#xff0c;也可以自定义波纹颜色#xff0c;持续时间#xff0c;透明度#xff0c;触发的对…Vue - 关于v-wave 波浪动画组件
这个动画库可以在标签中添加新的v-wave属性来让点击标签元素后添加漂亮的波纹效果并且可以根据父元素自动形成波纹的颜色也可以自定义波纹颜色持续时间透明度触发的对象等。
一、安装v-wave
npm i v-waveVue2引入
import Vue from vue
import VWave from v-waveVue.use(VWave)Vue3引入
import {createApp} from vue
import VWave from v-wave
import App from ./App.vuecreateApp(App).use(VWave).mount(#app)通过CDN
script srchttps://unpkg.com/v-wave/script# With a CDN, VWave is made available as a global
Vue.use(VWave)二、如何使用
要使用该动画组件只需将v-wave属性添加到需要波纹效果的元素标签中也可以对象的形式去自定义波纹的效果。
默认演示效果如下
templatediv classbox v-waveClick here/div
/templatestyle scoped
.box {display: grid;place-items: center;width: 200px;height: 200px;padding: 16px;box-shadow: 0px 0px 5px 1px #00000026;cursor: pointer;
}
/style自定义演示效果如下
templatedivclassboxv-wave{color: blue,initialOpacity: 0.5,duration: 2,easing: ease-in,}Click here/div
/templatestyle 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的动画效果。 templatelabel v-wave classtext-inputinput typetext placeholderSearch /imgv-wave-triggersrchttps://justintaddei.github.io/v-wave/imgs/search.svg//label
/templatestyle 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:gridDemov-wave“{trigger: ‘gridDemo’}”可支持多对多关系点击其中一个元素相同trigger的元素也会同步触发。 templatediv classwaveGriddiv classbox small v-wave-trigger:gridDemo v-wave{trigger: gridDemo,color:blue,duration:1} style/div......div classbox small v-wave-trigger:gridDemo v-wave{trigger: gridDemo,color:blue,duration:1} style/div/div
/templatestyle 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:button1Button 1/buttonbutton v-wave{trigger: button1} v-wave-trigger:button2Button 2/button三、组件参数Props
名称默认值类型描述color“currentColor”string颜色initialOpacity0.2number涟漪首次出现时的不透明度finalOpacity0.1number当涟漪停止移动时涟漪应该具有的不透明度duration0.4number涟漪的总持续时间以秒为单位dissolveDuration0.15number“溶解动画”的持续时间以秒为单位waitForReleasetrueboolean鼠标释放点击之前波纹不会溶解easingease-outstring过度定时函数具体查看cancellationPeriod75number延迟以毫秒为单位trigger“auto”string 、boolean 、“auto”设置与触发器一起使用时波纹的行为disabledfalseboolean无论 respectDisabledAttribute 如何都禁用元素上的波形效果respectDisabledAttributetrueboolean如果元素上存在 html 属性则波形效果将被禁用respectPrefersReducedMotiontrueboolean如果用户的 prefers-reduced-motion 设置为true 则波形效果将被禁用stopPropagationfalseboolean防止事件传播到父元素tagName“div”string设置用作波形容器的元素的标记名称。这在默认值可能会干扰或类似的选择器的情况下非常有用
v-wave动画组件能提供比较漂亮的点击波纹动画效果且组件自定义比较高可支持多对多触发关系有兴趣的可以尝试下
官网链接: v-wave官网 github地址: v-wave - github
