uniapp的动画运用（四）如何与css3动画结合使用《消息列表

css3本身的animation还是比较强大的，我们在开发过程中，可以结合css3的动画做出一些可控制的小效果，下面就以一个消息列表滚动效果的例子来说明一下使用方式。

消息列表滚动

一、基本思路

• 将需要运用的css动画定义成一个class，然后定义一个开关动态进行控制开关以便于开启或者关闭动画
• 每滚动一次需要将第一条数据放到最后，形成循环，示意图如下。

示意图

二、代码实现

1.模板

# 将up-animation动态绑定到每一个列表项中，通过isAnimate变量来控制动画的开启与关闭
# :class="{ 'up-animation': isAnimate }"

<view class="help-log-list-wrap">
        <view v-if="!logList.length">
          <u-empty
            text="暂无助力记录"
            mode="history"
            font-size="20"
            icon-size="100"
          ></u-empty>
        </view>
        <template v-else>
          <view
            class="log-list-item"
            :class="{ 'up-animation': isAnimate }"
            v-for="item in logList"
            :key="item.id"
          >
            <view class="item-left ellipsis">
              <u-avatar
                class="mr5"
                :src="item.create_portrait_url | filterImageUrl(80, 80)"
                :size="40"
              ></u-avatar>
              <text>{{ item.create_name }} 助力成功</text>
            </view>
            <view class="item-right ellipsis">{{
              item.created_at | filterTimeFrom
            }}</view>
          </view>
        </template>
      </view>

2.开关定义

data() {
    return {
      //是否开启动画
      isAnimate: false,
      //记录列表
      logList: [],
      //定时器
      timer: null,
      ...
    }
  }

3.滚动方法

//开启消息轮询定时器
startMessageTimer() {
    //列表数据少于三条就不滚动了
    if (this.timer || !this.logList.length || this.logList.length <= 3) {
        return
    }
    //每隔3秒钟滚动一次
    this.timer = setInterval(() => {
        //1.开启动画之后，这个时候列表就向上滚动了
        //2.在等待每次滚动时间差不多到的时候，把最前面的数据放到列表最后，这样就能循环滚动了
        //3.最后再关闭动画，等待下次再开启动画，这样就形成了循环滚动的效果了 
        this.isAnimate = true
        setTimeout(() => {
          //操作记录列表
          let firstItem = this.logList.shift()
          //添加到最后
          this.logList.push(firstItem)
          //关闭动画
          this.isAnimate = false
        }, 900)
    }, 3000)
},

4.css动画定义

//向上滚动1次的动画，每次滚动需要1秒钟
.up-animation {
  animation-name: upAni;
  animation-duration: 1s;
  @keyframes upAni {
    0% {
      transform: translateY(0rpx);
      -webkit-transform: translateY(0rpx);
    }
    100% {
      transform: translateY(-60rpx);
      -webkit-transform: translateY(-60rpx);
    }
  }
}