Material Design - 在点击时创建波纹 - 点击点的动画

Question

首先，这是链接（单击任何图块）：http://www.google.com/design/#resources

我已经完成了代码

 <svg width="100%" height="100%" overflow="hidden">
  <defs></defs>
    <g>
      <ellipse cx="27.5" cy="189.46875" rx="20" ry="20" stroke="none" fill="white" class="ripple" fill-opacity="0.5" style="-webkit-transform: scale(1); opacity: 0;">
       </ellipse>
    </g>
 </svg>

点击时，在点击点生成上面的椭圆。

谁能帮助如何在点击时创建它？

Answer 1

使用event.pageX 和event.pageY 在事件处理程序中查找鼠标坐标。使用这些值来定位圆。

jsfiddle.net/pu8jX

Answer 2

这是我找到的最好的例子，我希望他们能发挥作用！

http://thecodeplayer.com/walkthrough/ripple-click-effect-google-material-design

Waves：受 Google Material Design 启发的点击效果是另一个令人惊叹的库

http://publicis-indonesia.github.io/Waves/

Answer 3

我为此创建了一个插件，可以在github上获取https://github.com/ninox92/Google-material-design-ripple-effect/

预览：http://thomasreynders.com/google-material-design-plugin/