微信小程序之实现slideUp和slideDown效果和点击空白隐藏
2017-12-26 10:58
936 查看
怎样实现jq中的slideUp或者slideDown这种动画效果呢,我的思路是用css3的transform: translateY()属性,给需要动画的元素添加上一个动画class。
先上效果图:
1.蒙层的结构:
注意:三元运算符里的slideup和slidedown一定要加上引号
2.蒙层的其它样式自己写。最主要的是slideup和slidedown的动画效果的样式:
其它的样式:list-fix是fixed定位,而in-list是absolute定位。
需要注意的一点是:做的时候,是从Y轴100%的位置处即最底部开始运动或是从0到100%,所以要设置z-index,才能实现在底部运动起来的时候或者回到100%即底部的时候,蒙层浮在“确认下单”这整个结构的下面。即“确认下单”这整个结构的z-index要大于蒙层的z-index。
3.js
这样就能实现slidedown和slideup,点击其它地方隐藏某元素的功能了。
总结:1.防止冒泡的点击事件:catchtap=“”
2.点击父元素除子元素以外的其它地方隐藏父元素的方法:父元素绑定一个点击隐藏事件,然后子元素绑定catchtap这种能阻止冒泡的事件
3.巧用定时器设置属性值,可达到类似上面执行一个动画之后再执行另外一个动画的方法。
先上效果图:
1.蒙层的结构:
<!-- 购物车蒙层 --> <view class='list-fix' wx:if="{{mengShow}}" bindtap='outbtn'> //mengShow是蒙层是否显示的标志,然后蒙层绑定outbtn的点击事件 <view class='in-list {{aniStyle?"slideup":"slidedown"}}' catchtap='inbtn'> //这里的三元运算符是判断动画该执行哪一种,catchtap这个是阻止冒泡的点击事件,这个事件必须有,才能阻止冒泡 <view class='in-content'> <text>已选商品(1)</text> <text class='iconfont icon-6'>清空购物车</text> </view> <view class='cho-list' wx:for="{{chooseList}}" wx:key=""> <view class='listName'>{{item.Cname}}</view> <view class='listPrice'>¥{{item.Cprice}}</view> <view class='opBtn'> <view class='com-btn cuts' >-</view> <view class='com-num'>{{item.Cnum}}</view> <view class='com-btn add' >+</view> </view> </view> </view> </view>
注意:三元运算符里的slideup和slidedown一定要加上引号
2.蒙层的其它样式自己写。最主要的是slideup和slidedown的动画效果的样式:
@keyframes slidedown { from { transform: translateY(0); } to { transform: translateY(100%); } } .slidedown { animation: slidedown 0.5s linear ; } .slideup { animation: slideup 0.5s linear ; } @keyframes slideup { from { transform: translateY(100%); } to { transform: translateY(0); } }
其它的样式:list-fix是fixed定位,而in-list是absolute定位。
需要注意的一点是:做的时候,是从Y轴100%的位置处即最底部开始运动或是从0到100%,所以要设置z-index,才能实现在底部运动起来的时候或者回到100%即底部的时候,蒙层浮在“确认下单”这整个结构的下面。即“确认下单”这整个结构的z-index要大于蒙层的z-index。
3.js
page({ data: { mengShow:false,//蒙层的显示与否 aniStyle:true, //动画效果,默认slideup }, //蒙层的显示 showMeng:function(e){ //这是“确认下单”这整个购物车导航栏的点击事件 this.setData({ mengShow:true, //蒙层显示 aniStyle:true //设置动画效果为slideup }) }, outbtn:function(e){ //这是list-fix的点击事件,给它绑定事件,是为了实现点击其它地方隐藏蒙层的效果 var that=this; this.setData({ aniStyle:false //设置动画效果为slidedown }) setTimeout(function(){ //延时设置蒙层的隐藏,这个定时器的时间,就是slidedown在css动画里设置的时间,这样就能实现slidedown动画完成后,蒙层才消失的效果。不设置定时器会导致动画效果看不见 that.setData({ mengShow: false }) },500) }, inbtn:function(e){ //这个事件必须有,就算不做什么事情也要写上去,因为这个事件是为了防止事件冒泡,导致点击in-list这里面的元素时,点击事件冒泡到list-fix触发它的slidedown事件。 console.log("in") }, })
这样就能实现slidedown和slideup,点击其它地方隐藏某元素的功能了。
总结:1.防止冒泡的点击事件:catchtap=“”
2.点击父元素除子元素以外的其它地方隐藏父元素的方法:父元素绑定一个点击隐藏事件,然后子元素绑定catchtap这种能阻止冒泡的事件
3.巧用定时器设置属性值,可达到类似上面执行一个动画之后再执行另外一个动画的方法。
相关文章推荐
- 纯CSS实现滑动效果(Slide Up & Slide Down)
- 微信小程序点击实现隐藏和点击实现显示
- 点击显示或隐藏 slideDown/slideUp
- 微信小程序实例:实现tabs选项卡效果
- [JQ权威指南]SlideDown()与SlideUp()方法实现滑动效果
- JQuery mouse..事件+元素显示隐藏 切换 +淡入淡出+滑动效果。(可以做一个ul li下拉框滑动收起效果:slideUp)
- [jQuery教程]jquery基础教程六(滑动效果函数之slideDown,slideToggle和slideUp)
- 自定义ImageView实现类似微信朋友圈发图片点击出来阴影效果;同时使用Picasso加载网络图片
- 微信小程序页面内点击按钮转发 按钮透明的实现方法
- 微信小程序 tabs选项卡效果的实现
- Android学习之Android 5.0分享动画实现微信点击全屏效果
- 详解微信小程序 通过控制CSS实现view隐藏与显示
- 微信小程序分享功能之按钮button 边框隐藏和点击隐藏
- 微信小程序源码大集004---小程序实现大转盘 仿天猫抽奖 跑马灯效果(有图有源码)
- 微信小程序 tabs选项卡效果的实现
- javascript实现table单元格点击展开隐藏效果(实例代码)
- android 实现点击listview 空白地方隐藏菜单
- 微信小程序 实现动态显示和隐藏某个控件
- 微信小程序实现蒙版弹窗效果
- 微信小程序开发之radio实现显示和隐藏功能 原创 2017年07月04日 20:33:07 标签: 前端开发 / 微信 我们在开发微信小程序的时候,经常会用到显示和隐藏,