微信小程序实现点击效果

微信(小程序)  /  管理员 发布于 5年前   599

微信小程序动画之点击效果的具体代码，供大家参考，具体内容如下

代码：

js：

// pages/test/test.jsPage({ 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：

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;  }}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

您可能感兴趣的文章:

• 微信小程序 实现点击添加移除class
• 微信小程序实现给循环列表添加点击样式实例
• 微信小程序实现点击按钮修改view标签背景颜色功能示例【附demo源码下载】
• 微信小程序实现点击按钮修改字体颜色功能【附demo源码下载】
• 微信小程序之绑定点击事件实例详解
• 微信小程序实现点击文字页面跳转功能【附源码下载】
• 微信小程序加载更多 点击查看更多
• 微信小程序点击控件修改样式实例详解
• 微信小程序实现点击按钮修改文字大小功能【附demo源码下载】
• 微信小程序 点击控件后选中其它反选实例详解