怎么用css transition屬性實現一個帶動畫顯隱的微信小程序部件

今天小編給大家分享一下怎么用css transition屬性實現一個帶動畫顯隱的微信小程序部件 的相關知識點，內容詳細，邏輯清晰，相信大部分人都還太了解這方面的知識，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來了解一下吧。

代碼

page({
    data: {
        show:false//用于顯示或隱藏控件
    },
    chanMask:function(){
 var isShow = this.data.show ? false : true;//如果顯示就隱藏，隱藏就顯示
 this.setData({
            show:isShow
        })
    }
})

/*index.wxss*/
/*顯示前*/
.mask-con{
transition: 1s; 
position: fixed;
width: 100%;
height: 300rpx;
left: 0;
bottom: -300rpx;
 
text-align: center;
line-height: 300rpx;
box-shadow: 0 1px 10px #aaa;
}
/*顯示后*/
.mask-con-show{
bottom: 0;
}

<!--index.wxml-->
<view class="container">
<button bindtap="chanMask">點我</button>
<view class="mask-con {{show ? 'mask-con-show' : ''}}">
<view class="close" bindtap="chanMask">X</view>
慢慢飛起
</view>
</view>

在以上代碼中我們首先在data中定義了一個show變量用于mask-con控件的顯示狀態，在chanMask函數中交替的改變這個變量，然后將chanMask函數綁定給button和close控件的點擊事件上，最后我們根據show來決定是否給mask-con（我們的動畫控件）添加一個class： mask-con-show那么到這里我們已經實現了一個帶過渡的顯隱小部件

現在很多的APP或小程序都是以這種方式來close彈窗控件，那個X用戶點的不過癮，看到這里聰明的小伙伴可能會想到再另外添加一個陰影控件在mask-con的下層并綁定上我們的chanMask函數，這樣的話陰影控件和我們的mask-con就可能不是在一個整體上了，不夠直觀，又比如說領導要讓這個陰影它有一個顯示顏色慢慢加深，隱藏慢慢減淡的效果，為了應對這種情況，我們把代碼調整如下：

page({

    data: {
        show:false//用于顯示或隱藏mask控件
    },
    chanMask:function(){
 var isShow = this.data.show ? false : true;//如果顯示就隱藏，隱藏就顯示
 this.setData({
            show:isShow
        })
    }
})

/*index.wxss*/

.mask-shadow{
width: 100%;
height: 100%;
 
opacity: 0;
transition: 1s;
}
.mask-shadow-on{
opacity: 0.3;
}
.mask-con{
position: absolute;
width: 100%;
height: 300rpx;
left: 0;
bottom: -300rpx;
 
transition: 1s;
text-align: center;
line-height: 300rpx;
box-shadow: 0 1px 10px #aaa;
}
.mask-con-show{
bottom: 0;
}

<!--index.wxml-->
<view class="container">
<button bindtap="chanMask">點我</button>
<view class="mask {{show ? 'show' : 'hide'}}">
<view class="mask-shadow {{show ? 'mask-shadow-on' : ''}}"></view>
<view class="mask-con {{show ? 'mask-con-show' : ''}}">
<view class="close" bindtap="chanMask">X</view>
慢慢飛起
</view>
</view>
</view>

在這里我們設置了兩個樣式類名mask-shadow-on和mask-con-show來定義陰影以及主要控件mask-con動畫后的效果（具體代碼根據自己的需求決定），看起來一切都OK，沒有任何問題，那么先運行一波，艾瑪，神馬情況？陰影和我們的mask-con直接懟了出來毫無過渡效果，那這是何原因影響我們程序的效果呢，經過一番考量博主發現在display為none的情況之下我們的transition屬性可能會失效，那到這里有的小伙伴可能會問 “博主，那個不對啊，我們明明已經將mask的display設置成block怎么還有這種問題呢”

是這樣的，我們的mask控件它顯示需要那么一點時間才能完全顯示出來，但是呢我們的變量show設置成true之后，我們的陰影控件和主要控件也會馬上添加上了動畫后樣式類名，這個時間它比mask顯示所需的時間要快，所以我們的機器它認為mask還是處于display為none的情況

打個比方說：mask是這一整塊的老大，這個老大都還沒表演完事，你們這些做小弟就已經出來搶風頭了，你讓當老大的面子往哪放，不行我得把你們這些搶我風頭的都給干掉，看你們還得瑟。這個老大的人狠話不多，你搶了他風頭不行，你想不表演他（用戶體驗）也不高興，而且他表演完了還不跟你說，那這個老大這么難伺候該怎么辦呢？有的小伙伴已經感覺到迷茫了嗎，那還在等什么，趕快拿起你手中的電話撥打求助熱線。。。。。啊呸，扯遠了

其實決解的方法很簡單，沒錯答案就是 setTimeout()函數，來，我們把代碼再改一遍：

page({
        data: {
        show:false,//用于顯示或隱藏mask控件
        runAM:false//用于動畫執行的根據
    },
    chanMask:function(){
 var isShow = this.data.show ? false : true;//如果顯示就隱藏，隱藏就顯示
 var delay  = isShow ? 30 : 1000;//第一個時間是博主測出來控件顯示所需的時間，第二個是動畫所需的時間
 if(isShow){
 this.setData({
                show:isShow
            });
        }else{
 this.setData({
                runAM:isShow
            })
        }
 
        setTimeout(function(){
 if(isShow){
 this.setData({
                    runAM:isShow
                });
            }else{
 this.setData({
                    show:isShow
                });
            }
        }, delay);

    }
})

<!--index.wxml-->
<view class="container">
<button bindtap="chanMask">點我</button>
<view class="mask {{show ? 'show' : 'hide'}}" bindtap="chanMask">
<view class="mask-shadow {{runAM ? 'mask-shadow-on' : ''}}"></view>
<view class="mask-con {{runAM ? 'mask-con-show' : ''}}">
<view class="close" bindtap="chanMask">X</view>
慢慢飛起
</view>
</view>
</view>

在以上代碼中，我們給data新添加了一個變量runAM用于動畫何時開始執行的憑證，再在chanMask函數定義了一個用于設置延時的變量delay 代碼可能有點繞博主在此粗暴的解釋一下

程序的整個過程都是根據isShow這個變量來走的，

當isShow為true時也就是說我們要打開mask控件了，所以我們先把mask控件顯示出來，然后在延時30毫秒后去為要執行動畫的控件添加上樣式類名

當isShow為false時我們先把動畫控件的類名去掉（去掉后會執行動畫回到原本的形態），然后在延時1000毫秒（動畫所需的時間）后讓mask隱藏

以上就是“怎么用css transition屬性實現一個帶動畫顯隱的微信小程序部件 ”這篇文章的所有內容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會為大家更新不同的知識，如果還想學習更多的知識，請關注億速云行業資訊頻道。