vue 鼠标点击特效动画，水波纹动画效果

效果展示

点击效果

截图

思路要点

1. 通过向数组 waves push操作插入水波纹相关数据，使用 vue v-for 动态更新 waves 生成水波纹数据
2. 水波纹使用fixed定位通过点击事件的 clientX 和 clientY属性 映射水波纹dom 的 top，left 属性
3. 水波纹使用 scale 放大作为扩散效果，从内到外放大倍数指数增长，模拟波纹越来越大的效果，使用 opacity 属性实现渐淡效果
4. 定义水波纹各圈初始状态，总体过渡到 scale(1), opacity: 0;并保持此最终状态；
5. 点击次数的增加会使得dom逐渐增长，定时检测是否有点击，若没有则清空 waves 数组
6. 随机产生波纹大小数据，丰富波纹效果

使用

在App.vue 中引用即可

代码如下

//waves.vue