持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第2天，点击查看活动详情

前言

继续昨天的公告消息左右走马灯滚动，今天来一个公告消息上下展示，本次使用了vue的过渡动画组件来进行一个公告消息的切换。vue3的监听数据来进行判断是否展示消息公告组件，再通过定时器来控制数据。

效果

话不多说，直接贴代码展示效果

代码解析

这是一个从上到下的一个消息轮播展示效果，主要使用定时器控制两个数组的数据添加与数据删除。

核心代码就是动画效果

监听数据源，从而展示组件，再使用定时器控制消息

watchEffect(async () => {
  if (noticeList.value.length > 0) {
    show.value = true
    await nextTick()

    list.value.shift()
    list.value.push(noticeList.value[0])

    let vl = 1
    let timer1 = setInterval(() => {
      
      // 重置消息
      if (vl > noticeList.value.length - 1) {
        show.value = false
        clearInterval(timer1)
        getAllAwards()
      }

      list.value.shift()
      list.value.push(noticeList.value[vl])
      vl += 1
    }, 3000)

  } else {
    show.value = false
  }
})

使用vue的过渡组件

  <transition name="fade">
    <div class="notice icon icon-notice-bg" v-if="show">
      <transition-group name="slide" tag="div" class="wrap">
      <span v-for="(item, index) in list" :key="`${index}${Date.now()}`">
        恭喜{{ item?.name }}获得闯关成功！
      </span>
      </transition-group>
    </div>
  </transition>

拓展css

这一部分都是官网文档中的内容，直接查看文档即可

.slide-enter-active,
.slide-leave-active {
  transition: all 0.5s ease;
}

.slide-enter-from,
.slide-leave-to {
  opacity: 0;
}

.slide-enter-from {
  transform: translateY(100%);
}

.slide-leave-to {
  transform: translateY(-100%);
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

总结

这次的公告栏消息滚动就这样，更多的则是使用了官方的轮子，定时器的简单操作，相信还可以继续在我的基础上继续优化，从而使这个组件更完美。

公告消息上下滚动切换

前言

效果

代码解析

核心代码就是动画效果

总结