微信小程序如何实现点击空白区域隐藏功能？

本文共计1067个文字，预计阅读时间需要5分钟。

如何实现jQuery中的slideUp或slideDown这种动画效果呢？我的思路是使用CSS3的transform: translateY()属性，给需要动画的元素添加一个动画class。

1. 首先定义动画class，例如`.slide-up`和`.slide-down`：css.slide-up { transform: translateY(-100%); transition: transform 0.5s ease-in-out;}

.slide-down { transform: translateY(100%); transition: transform 0.5s ease-in-out;}

2.然后在JavaScript中，根据需要执行动画：

javascript// 上滑动画function slideUp(element) { element.classList.add('slide-up'); setTimeout(()=> { element.classList.remove('slide-up'); }, 500);}

// 下滑动画function slideDown(element) { element.classList.add('slide-down'); setTimeout(()=> { element.classList.remove('slide-down'); }, 500);}

3.最后，在HTML中调用动画函数：

这是需要动画的元素效果图：

1.雪层的结构：

!-- 购物车雪层 -->

怎样实现jq中的slideUp或者slideDown这种动画效果呢，我的思路是用css3的transform: translateY（）属性，给需要动画的元素添加上一个动画class。

先上效果图：

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.巧用定时器设置属性值，可达到类似上面执行一个动画之后再执行另外一个动画的方法。

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