微信小程序之實現slideUp和slideDown效果和點擊空白隱藏

怎樣實現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.巧用定時器設置屬性值，可達到類似上面執行一個動畫之后再執行另外一個動畫的方法。