实现一个开关式的淡入淡出动画效果
今天接到了个小需求，没事的时候研究了下，点亮/关闭星星淡入淡出效果，结合animate.css实现，so easy!!!
实现方法有N种 例如官方的API：wx.createAnimation、css3等，感觉还是我这种最简单，不废话了，直接上代码！
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
- 这里没啥可说的了 略略略……
@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事件触发后直接更换class类名
- aniState控制图片，图片在600ms（自定义毫秒）之后切换完成
/**
* 页面的初始数据
*/
data: {
aniState: false,
notOpen: '/image/star-gray.png',
openSrc: '/image/star-yellow.png',
//控制 动画 类名
classState:false
},
fadeInOut() {
let that = this,
aniState = that.data.aniState,
classState = that.data.classState
// 执行淡入淡出动画
that.setData({
classState: !classState
})
// 延时600ms切换图片
setTimeout(()=> {
that.setData({
aniState: !aniState
})
},600)
},
完美效果展示...
star.gif
