微信小程序动画之点击效果 - 蓝蓝设计_UI设计公司

追求卓越一诺千金

蓝蓝设计,2011年成立,主创清华团队,专注软件和互联网ui设计开发。擅长企业信息化管理、监控、大数据软件UIUE咨询和设计开发服务。立足UI,好好学习,天天进步!


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

2019-6-28 释然 前端及开发文章及欣赏


如果您想订阅本博客内容,每天自动发到您的邮箱中,

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

代码:
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.thriveonsite.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、网站建设 平面设计服务

标签: 微信小程序动画之点击效果 « 想做大数据可视化?来看高手的实战案例! | 可视化数据大屏应该如何设计»


订阅Rss
秒速赛车官网 秒速赛车官网 秒速赛车官网 秒速赛车官网 秒速赛车官网 秒速赛车官网 秒速赛车官网 秒速赛车官网 秒速赛车官网 秒速赛车官网