首頁 >web前端 >css教學 >css+transition做出顯隱動畫

css+transition做出顯隱動畫

php中世界最好的语言原創: 2018-06-13 14:00:502691瀏覽

這次帶給大家css transition做出顯隱動畫，的注意事項有哪些，下面就是實戰案例，一起來看一下。

我們先來看效果圖

像這樣的一個帶有過渡效果的小部件在我們實際開發中的應用幾率還是比較大的，但在開發微信小程式的過程中可能有的小夥伴發現transition這個屬性它不好使（下面說明）所以我們這個時候會考慮去使用微信官方提供的wx.createAnimation API來創建動畫。

接下來我帶各位小夥伴如何讓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 ? &#39;mask-con-show&#39; : &#39;&#39;}}">
<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 ? &#39;show&#39; : &#39;hide&#39;}}">
<view class="mask-shadow {{show ? &#39;mask-shadow-on&#39; : &#39;&#39;}}"></view>
<view class="mask-con {{show ? &#39;mask-con-show&#39; : &#39;&#39;}}">
<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 ? &#39;show&#39; : &#39;hide&#39;}}" bindtap="chanMask">
<view class="mask-shadow {{runAM ? &#39;mask-shadow-on&#39; : &#39;&#39;}}"></view>
<view class="mask-con {{runAM ? &#39;mask-con-show&#39; : &#39;&#39;}}">
<view class="close" bindtap="chanMask">X</view>
慢慢飞起
</view>
</view>
</view>

在以上程式碼中，我們為data新添加了一個變數runAM用於動畫何時開始執行的憑證，再在chanMask函數定義了一個用於設定延時的變數delay 程式碼可能有點繞部落客在此粗暴的解釋一下

程式的整個過程都是根據isShow這個變數來走的，

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

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

關於delay的第一個值的設定時博主自己測出來的，如果各位小伙伴還擔心控件沒顯示的話可以設成50毫秒或100毫秒都無所這0.1秒的時間差對用戶體驗的影響並不大，如過你設了1秒都沒反應，我只能說換手機吧

最後你會發現在整個過程中博主都只調用一個函數進行顯示或隱藏，並沒有為關閉新建函數處理，這種寫法逼格滿滿有木有

此方法同樣適用於H5

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！