背景
今天，我想要知道一个网页的按钮点击后的 wave 动画效果是如何实现的，动画效果如图：
在简单的看了一下节点的元素和 Animation 后，确定了动画过程，但是有一个问题，那就是这一个节点消失了，即使我使用暂停也没有用。消失的节点就是下图中的灰色部分：
真没想到，前面学会了用 Animations 捕获只出现一瞬间的类名，还想着可以“一劳永逸”。没想到这么快就又遇到瓶颈了。
问题
我点击“邀请中心”时，观察到图中的 span 标签出现了新的子结点，但是它很快就消失了，我尝试了使用手速捕获和使用 Animation 暂停，都解决不了。
解决问题
断点（其实应该很容易想出来的）。
为 span 元素添加断点，添加方式如下（给出了中英两种界面）：
加好断点好，看一下，现在是未点击的时候：
然后现在我们点击“邀请中心”按钮，此时会触发中断，进入调试源代码界面，我们可以进行调试：
每点击一下“step into”（即上图红色方框），然后看一下元素中是否出现了我们想要的子节点，可以看到，成功出现了我们想要的子节点，而且还是两个呢！：
好了，到这里，我就可以愉快地查看他是如何实现的了。
wave 实现方式
通过断点调试，可以知道他的大致实现流程：
- 点击按钮，会渲染两个
span节点
- 两个节点出现时，会有动画，该动画成就了 wave 效果
- 渲染完 wave 效果后，两个节点就消失了
