微信小程序动画之点击效果

代码：
js：

// pages/test/test.js
Page({
　containerTap: function (res) {
　　var that = this
　　var x = res.touches[0].pageX;
　　var y = res.touches[0].pageY + 85;
　　this.setData({
　　　rippleStyle: ''''
　　});
　　setTimeout(function () {
　　　that.setData({
　　　　rippleStyle: ''top:'' + y + ''px;left:'' + x + ''px;-webkit-animation: ripple 0.4s linear;animation:ripple 0.4s linear;''
　　　});
　　}, 200)
　},
})


wxml：

<view class="ripple" style="{{rippleStyle}}"></view>
<view class="container" bindtouchstart="containerTap"></view>

wxss：

page{height:100%}
.container{
　　width:100%;
　　height:100%;
　　overflow: hidden
}
.ripple {
　　background-color:aquamarine;
　　border-radius: 100%;
　　height:10px;
　　width:10px;
　　margin-top: -90px;
　　position: absolute;
　　
　　overflow: hidden
}
@-webkit-keyframes ripple {
　　100% {
　　webkit-transform: scale(12);
　　transform: scale(12);
　　background-color: transparent;
　　}
}

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、网站建设 、平面设计服务。http://www.lanlanwork.com/blog/?post=5826