本篇文章主要介绍了"怎么用 Vue 实现 Material Design的涟漪动效"，主要涉及到material方面的内容，对于Javascriptjrs看球网直播吧_低调看直播体育app软件下载_低调看体育直播感兴趣的同学可以参考一下：
「掘金·发现」是稀土圈微信公众号的一个新栏目。正如大家所知，稀土掘金致力于挖掘最优质的互联网技术，为用户带去最优质的阅读体验。我们做这个栏目的出发点，也正是如此...
「掘金·发现」是稀土圈微信公众号的一个新栏目。正如大家所知，稀土掘金致力于挖掘最优质的互联网技术，为用户带去最优质的阅读体验。我们做这个栏目的出发点，也正是如此。掘金社区当中有趣而有用的内容，我们呈现给你。
在本期栏目中，来自我们稀土掘金的 Awe 会用个人实践经历，告诉大家如何使用 Vue 来实现 Material Design 中点击按钮产生水纹扩散的效果。
第一次看到 Material Design Lite 的时候只能用惊艳来表达，原来按钮、复选框、输入框等控件还可以这样玩。
有兴趣的朋友可以前往 Material Design Lite 官网了解更多详情。
说了这么多，还是先上最终效果图看看怎么样吧：
去年的时候，我把 MDL 搬到了 Vue 里，写了一个简单的博客。这里的动效全部都是在 Vue 渲染出 DOM 之后调用 MDL 的方法来实现的。
比如这段代码就是首页异步获取的文章列表数据之后调 componentHandler.upgradeAllRegistered()
asyncData: function(resolve, reject) {
this.loadPost(0, (tmp) => {
store.actions.hideLoading();
resolve({
posts: tmp
})
this.site.skip = 10;
this.$nextTick(function() {
componentHandler.upgradeAllRegistered();
})
})
}
上面提到的是一个相对简单轻松的用法，但是总给人感觉不够优雅，你总得去调用那个黑盒般的方法。
好在，我是一个喜欢折腾的人，还是自己来实现一下这个效果吧。
Material Design 里特别吸引我的一个效果就是点击按钮之后，会有水波的涟漪从点击的中心向外扩散出去的效果。
于是，我马上打开了 Chrome 开发者工具去看看它的 DOM 结构(为了显示效果，我删掉了 Button 元素的一部分 Class)
看来以上代码块就是实现上文所说水波扩散效果的部分了。
