在 design.google.com 上发现的涟漪效应答案

【问题标题】：Ripple effect as found on design.google.com在 design.google.com 上发现的涟漪效应
【发布时间】：2016-12-01 17:40:25
【问题描述】：

我正在尝试复制在 design.google.com 上发现的连锁反应。单击标题中的链接时，它会在标题上产生涟漪。我在这里找到了一个教程：http://webdesign.tutsplus.com/tutorials/recreating-the-touch-ripple-effect-as-seen-on-google-design--cms-21655 但是，本教程不会将点击事件限制在链接上，而是将任何点击事件限制在标题中。

我所做的是给有问题的链接一个“涟漪效应”类，并指示 on js 监听该类的“点击”。这并没有预期的影响……或者真的没有任何影响。如果我将 js 更改为收听标题类（“mdl-layout__header”）中找到的“点击”，它可以工作......只是不像预期的那样。

我已将代码上传到 jsfiddle.net/thepaperescape/1qmsh7Ld/ 和https://github.com/thepaperescape/Ripple

请帮忙，谢谢！

【问题讨论】：

【解决方案1】：

据我了解，您需要在效果后跳转到链接这可以通过 jquery/javascript 本身在效果后添加下面的代码来完成您还需要 preventDefault() 防止默认行为锚链接。

检查我的pen 我已经使用 css3 动画创建了涟漪效果并通过 jquery 计算了偏移量。效果后使用该属性跳转到锚链接。

 window.location = $(this).attr("href")

【讨论】：