「这是我参与2022首次更文挑战的第3天，活动详情查看：2022首次更文挑战」 前言 首先抛开 vue 本身，假设需要给某个 Dom 元素实现一些过渡动画，那么下面这些事是必须的： 实现目标元素不同时

ui设计的元素有时候需要有一些动画效果，可以直接用css动画来实现。 实现一个圆向四周有水波纹的效果 利用定位添加多个圆，给他们加上动画，使得依次从小变大，这样就形成了逐渐外扩的动画效果

要完成以上效果首先我们的思路是通过点击外层触发点击事件，收集点击次数然后创建与点击次数相同的水波纹动画组件。然后每当水波纹组件动画执行完之后去销毁当前这个水波纹组件。 以上主要是使用了transition组件去包裹一个标签，然后每当transition组件动画执行完之后去调…

先来看下效果：example，远古时期写的东西，随便找几个按钮点击即可看到效果。 代码地址：ripple canvas绘制和css3绘制我都实现过，最终还是css效果、性能更佳。 思路 这个其实十分简

CSS水波纹实现，使用了border-radius属性，构造一个接近圆的不规则图形，然后使用动画，让其绕Z轴不断旋转，以达到一种波浪运动的视觉效果。

vuejs 水波纹框架