小程序淡入淡出动画

实现一个开关式的淡入淡出动画效果

今天接到了个小需求，没事的时候研究了下，点亮/关闭星星淡入淡出效果，结合animate.css实现，so easy!!!
实现方法有N种 例如官方的API：wx.createAnimation、css3等，感觉还是我这种最简单，不废话了，直接上代码！

HTML:

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