淡入淡出动画效果

主要原理是通过控制透明度显示。

WXML

 <!-- 加入居民提示 -->
 <view class="add-tip" animation="{{animationData}}" wx:if="{{addList.length>0}}">
   <view class="add-left-icon">
     <image class="" src="{{addCurrent.avatar}}" mode="scaleToFill" />
   </view>
   <text>{{addCurrent.desc}}</text>
 </view>

JS

var Interval;
Page({
  data: {
    animationData: {},
    addList: [
      // { content: '3分钟前张**加入了本网格' }, { content: '2分钟前张**加入了本网格' }, { content: '1分钟前张**加入了本网格' }
    ],
    addCurrent: {},
    addNum: 0,
    isShow: false,
    isMask: false,
  },
  onLoad: function() {

  },
  // 首页数据
  getData() {
    let that = this
    // 数据重新加载时需要清除定时器 不清除的话会出现闪现速度变快
    clearInterval(Interval)
    Interval = setInterval(function () {
      that.animateFn()
    }, 6000)
  },
  // 加入居民渐入渐出动画
  animateFn() {
    var animation = wx.createAnimation({
      //持续时间1000ms
      duration: 1000,
      timingFunction: 'ease',
    })

    // this.animation = animation
    setTimeout(
      function () {
        animation.opacity(1).step()
        this.setData({
          // isShow: true,
          animationData: animation.export(),
        })
      }.bind(this),
      500
    )
    setTimeout(
      function () {
        animation.opacity(0).step()
        this.setData({
          animationData: animation.export(),
        })
      }.bind(this),
      4000
    )
    setTimeout(() => {
      var num = this.data.addNum
      if (this.data.addNum == this.data.addList.length - 1) {
        num = 0
      } else {
        num++
      }
      var add = this.data.addList[num]
      this.setData({
        addNum: num,
        addCurrent: add,
      })
    }, 5000)
  },
})

WXSS
// less

  .add-tip {
    // width: 500rpx;
    padding-right: 15rpx;
    height: 50rpx;
    line-height: 50rpx;
    background: RGBA(27, 58, 98, 1);
    border-radius: 24rpx;
    opacity: 0;
    position: absolute;
    top: 10rpx;
    left: 24rpx;
    .add-left-icon {
      width: 32rpx;
      height: 32rpx;
      border: 1px solid #c7c7c7;
      border-radius: 50%;
      margin: 3px 14rpx 0;
      float: left;
      overflow: hidden;
      image {
        width: 100%;
        height: 100%;
        float: left;
      }
    }
    text {
      max-width: 420rpx;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-size: 26rpx;
      font-weight: 400;
      color: #ffffff;
      float: left;
    }
  }

参考：
界面 /动画 /wx.createAnimation