微信小程序实现slideUp、slideDown滑动效果及点击空白隐藏功能示例

<!-- 购物车蒙层 --><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>

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

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")  },})