實(shí)現(xiàn)一個(gè)開(kāi)關(guān)式的淡入淡出動(dòng)畫(huà)效果
今天接到了個(gè)小需求岂却，沒(méi)事的時(shí)候研究了下泉唁，點(diǎn)亮/關(guān)閉星星淡入淡出效果雷酪，結(jié)合animate.css實(shí)現(xiàn)捂龄，so easy!!!
實(shí)現(xiàn)方法有N種 例如官方的API：wx.createAnimation释涛、css3等，感覺(jué)還是我這種最簡(jiǎn)單倦沧，不廢話了唇撬，直接上代碼！
HTML:
<view class='container'>
<image src="{{notOpen}}" class="img animated {{classState?'fadeOut':'fadeIn'}}" bindtap="fadeInOut" hidden="{{aniState}}"></image>
<image src="{{openSrc}}" class="img animated {{classState?'fadeIn':'fadeOut'}}" bindtap="fadeInOut" hidden="{{!aniState}}"></image>
</view>
WXSS:
- 引用animate.css
- 這里沒(méi)啥可說(shuō)的了 略略略……
@import '../../utils/animate.min.wxss';
.container{
display: flex;
flex-direction: column;
align-items: center;
}
.img{
width: 110rpx;
height: 110rpx;
margin: 100rpx 0;
}
JS:
- classState控制animate.css中類名的切換
- fadeInOut事件觸發(fā)后直接更換class類名
- aniState控制圖片展融，圖片在600ms（自定義毫秒）之后切換完成
/**
* 頁(yè)面的初始數(shù)據(jù)
*/
data: {
aniState: false,
notOpen: '/image/star-gray.png',
openSrc: '/image/star-yellow.png',
//控制 動(dòng)畫(huà) 類名
classState:false
},
fadeInOut() {
let that = this,
aniState = that.data.aniState,
classState = that.data.classState
// 執(zhí)行淡入淡出動(dòng)畫(huà)
that.setData({
classState: !classState
})
// 延時(shí)600ms切換圖片
setTimeout(()=> {
that.setData({
aniState: !aniState
})
},600)
},
完美效果展示...
star.gif
