material design 之 ripple（波纹）效果

初衷：由于项目需要，学习Google的material design（感觉都是设计相关啊有木有～接触前端近一年再次感受到了前端是大杂烩的懵圈），其中的涟漪效果用户体验相当好，就以muse ui框架（基于vue）， 为例学习, 原生实现可看materalscss

实现思路：

1、获取鼠标点击位置(即波纹源相对offsetParent节点)的位置

代码实现: src/utils/domUtil.js

2、计算波纹最大半径
为什么要单独列出来呢，这里必须要学（吐）习（槽）muse ui作者的严谨思维
实现方式：
(1)(muse ui)计算距离offsetParant节点四个角最远的距离 * 2( 相当精确···)

(2)offsetParent最长宽高 * 2（个人想法：简单快捷~）
Math.(width, height) * 2

3、添加波纹效果节点
为什么需要添加节点而不用直接添加class?实现重复点击的连续波纹效果。

muse ui(src/internal/touchRipple): 所有的点击元素都封装在rouchRipple组件（外层套wrapper）中，circleRipple组件 则是带transition的div, 通过继承颜色、大小实现波纹效果。而materialscss 在可点击元素内部添加节点

ripples数组记录产生的波纹div

利用vue的transition便签设置css波纹效果（即 scale(0), opacity: 0 ）

通过监听touchleave事件，删除数组元素，重新渲染v-for渲染实现波纹效果(原生实现, 从渲染效率角度推荐transform而非 animation)

---

延伸思考(个人走的弯路)：
1. 按vue数组更新检测，在执行splice应该直接刷新视图，为什么动画能执行后再删除节点?
想着想着竟然从vue源码的render函数里寻找根本原因，花了1个多小时分析vue结构，查找代码，脑子里只剩下vue文件整体结构，又联想到vue 2.x实现了虚拟dom，抽象程度较高，找到答案的时间代价太大~于是改变思维从官方文档查找，终于在列表过渡找到答案···

---

额外收获:
1. window.requestAnimationFrame: 实现动画刷新。
2. muse-ui的下划线展开效果，原以为还得写长度、位置、transform，结果只用设置scale(0 - 1) 就行，css不熟练时，论源码学习的好处···