# 将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>
            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 {
      transform: translateY(0rpx);
      -webkit-transform: translateY(0rpx);
    100% {
      transform: translateY(-60rpx);