| 微信小程序动画之点击效果 | |
| 【返回本版】 【发表帖子】 【回复帖子】 | 浏览量 920 回帖数 0 |
 |
lanlan123 等级 ☆ 楼主 发表于 2019/7/15 9:51:58 编 辑 |
|
|
微信小程序动画之点击效果 代码： 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 |
||
| 1 |