使用css transition屬性實(shí)現(xiàn)一個(gè)帶動(dòng)畫顯隱的微信小程序部件
我要評(píng)論我們先來看效果圖
像這樣的一個(gè)帶過渡效果的小部件在我們實(shí)際開發(fā)中的應(yīng)用幾率還是比較大的，但是在開發(fā)微信小程序的過程中可能有的小伙伴發(fā)現(xiàn)transition這個(gè)屬性它不好使（下面說明）所以我們這個(gè)時(shí)候會(huì)考慮去使用微信官方提供的wx.createAnimation API來創(chuàng)建動(dòng)畫。
接下來我?guī)Ц魑恍』锇槿绾巫?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">點(diǎn)我</button>
<view class="mask-con {{show ? 'mask-con-show' : ''}}">
<view class="close" bindtap="chanMask">X</view>
慢慢飛起
</view>
</view>
在以上代碼中我們首先在data中定義了一個(gè)show變量用于mask-con控件的顯示狀態(tài)，在chanMask函數(shù)中交替的改變這個(gè)變量，然后將chanMask函數(shù)綁定給button和close控件的點(diǎn)擊事件上，最后我們根據(jù)show來決定是否給mask-con（我們的動(dòng)畫控件）添加一個(gè)class： mask-con-show那么到這里我們已經(jīng)實(shí)現(xiàn)了一個(gè)帶過渡的顯隱小部件，但是對(duì)于某些需求這還是太勉強(qiáng)了，比如下圖的情況：
現(xiàn)在很多的APP或小程序都是以這種方式來close彈窗控件，那個(gè)X用戶點(diǎn)的不過癮，看到這里聰明的小伙伴可能會(huì)想到再另外添加一個(gè)陰影控件在mask-con的下層并綁定上我們的chanMask函數(shù)，這樣的話陰影控件和我們的mask-con就可能不是在一個(gè)整體上了，不夠直觀，又比如說領(lǐng)導(dǎo)要讓這個(gè)陰影它有一個(gè)顯示顏色慢慢加深，隱藏慢慢減淡的效果，為了應(yīng)對(duì)這種情況，我們把代碼調(diào)整如下：
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">點(diǎn)我</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>
在這里我們?cè)O(shè)置了兩個(gè)樣式類名mask-shadow-on和mask-con-show來定義陰影以及主要控件mask-con動(dòng)畫后的效果（具體代碼根據(jù)自己的需求決定），看起來一切都OK，沒有任何問題，那么先運(yùn)行一波，艾瑪，神馬情況？陰影和我們的mask-con直接懟了出來毫無過渡效果，那這是何原因影響我們程序的效果呢，經(jīng)過一番考量博主發(fā)現(xiàn)在display為none的情況之下我們的transition屬性可能會(huì)失效，那到這里有的小伙伴可能會(huì)問 “博主，那個(gè)不對(duì)啊，我們明明已經(jīng)將mask的display設(shè)置成block怎么還有這種問題呢”
是這樣的，我們的mask控件它顯示需要那么一點(diǎn)時(shí)間才能完全顯示出來，但是呢我們的變量show設(shè)置成true之后，我們的陰影控件和主要控件也會(huì)馬上添加上了動(dòng)畫后樣式類名，這個(gè)時(shí)間它比mask顯示所需的時(shí)間要快，所以我們的機(jī)器它認(rèn)為mask還是處于display為none的情況
打個(gè)比方說：mask是這一整塊的老大，這個(gè)老大都還沒表演完事，你們這些做小弟就已經(jīng)出來搶風(fēng)頭了，你讓當(dāng)老大的面子往哪放，不行我得把你們這些搶我風(fēng)頭的都給干掉，看你們還得瑟。這個(gè)老大的人狠話不多，你搶了他風(fēng)頭不行，你想不表演他（用戶體驗(yàn)）也不高興，而且他表演完了還不跟你說，那這個(gè)老大這么難伺候該怎么辦呢？有的小伙伴已經(jīng)感覺到迷茫了嗎，那還在等什么，趕快拿起你手中的電話撥打求助熱線。。。。。啊呸，扯遠(yuǎn)了
其實(shí)決解的方法很簡單，沒錯(cuò)答案就是 setTimeout()函數(shù)，來，我們把代碼再改一遍：
page({
data: {
show:false,//用于顯示或隱藏mask控件
runAM:false//用于動(dòng)畫執(zhí)行的根據(jù)
},
chanMask:function(){
var isShow = this.data.show ? false : true;//如果顯示就隱藏，隱藏就顯示
var delay = isShow ? 30 : 1000;//第一個(gè)時(shí)間是博主測出來控件顯示所需的時(shí)間，第二個(gè)是動(dòng)畫所需的時(shí)間
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">點(diǎn)我</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新添加了一個(gè)變量runAM用于動(dòng)畫何時(shí)開始執(zhí)行的憑證，再在chanMask函數(shù)定義了一個(gè)用于設(shè)置延時(shí)的變量delay 代碼可能有點(diǎn)繞博主在此粗暴的解釋一下
程序的整個(gè)過程都是根據(jù)isShow這個(gè)變量來走的，
當(dāng)isShow為true時(shí)也就是說我們要打開mask控件了，所以我們先把mask控件顯示出來，然后在延時(shí)30毫秒后去為要執(zhí)行動(dòng)畫的控件添加上樣式類名
當(dāng)isShow為false時(shí)我們先把動(dòng)畫控件的類名去掉（去掉后會(huì)執(zhí)行動(dòng)畫回到原本的形態(tài)），然后在延時(shí)1000毫秒（動(dòng)畫所需的時(shí)間）后讓mask隱藏
關(guān)于delay的第一個(gè)值的設(shè)定時(shí)博主自己測出來的，如果各位小伙伴還擔(dān)心控件沒顯示的話可以設(shè)成50毫秒或100毫秒都無所這0.1秒的時(shí)間差對(duì)用戶體驗(yàn)的影響并不大，如過你設(shè)了1秒都沒反應(yīng)，我只能說換手機(jī)吧
最后你會(huì)發(fā)現(xiàn)在整個(gè)過程中博主都只調(diào)用一個(gè)函數(shù)進(jìn)行顯示或隱藏，并沒有為關(guān)閉新建函數(shù)處理，這種寫法逼格滿滿有木有
此方法同樣適用于H5
新人第一次寫博客有點(diǎn)啰嗦了，望見諒
GitHub連接 https://github.com/1441327053/frontEnd-WXapp/tree/master/widget-transition
總結(jié)
以上所述是小編給大家介紹的使用css transition屬性實(shí)現(xiàn)一個(gè)帶動(dòng)畫顯隱的微信小程序部件，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
相關(guān)文章
css動(dòng)畫屬性使用及實(shí)例代碼(transition/transform/animation)
這篇文章主要介紹了css動(dòng)畫屬性使用及實(shí)例代碼(transition/transform/animation) ,需要的朋友可以參考下2019-05-09CSS3使用transition屬性實(shí)現(xiàn)過渡效果
CSS3中新增的transform屬性，可以實(shí)現(xiàn)元素在變換過程中的過渡效果，實(shí)現(xiàn)了基本的動(dòng)畫。下面通過本文給大家介紹CSS3使用transition屬性實(shí)現(xiàn)過渡效果，需要的朋友參考下本文2018-04-18- 大家都知道過渡動(dòng)畫是動(dòng)畫的基礎(chǔ)，在學(xué)習(xí)動(dòng)畫屬性之前，我們需要先了解過渡屬性transition，下面這篇文章通過示例代碼給大家詳細(xì)介紹了CSS3中的元素過渡屬性transition，有2016-11-30
- 這篇文章主要介紹了css3的transition屬性詳解,需要的朋友可以參考下2014-12-15
- W3C標(biāo)準(zhǔn)中對(duì)CSS3的transition這是樣描述的:“CSS的transition允許CSS的屬性值在一定的時(shí)間區(qū)間內(nèi)平滑地過渡。這種效果可以在鼠標(biāo)單擊、獲得焦點(diǎn)、被點(diǎn)擊或?qū)υ厝魏胃淖冎?/div> 2014-09-02這篇文章主要介紹了css簡單動(dòng)畫之transition屬性詳解,需要的朋友可以參考下2019-09-17
最新評(píng)論