微信小程序之实现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")
    },  
})