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

前言

已经成为前端一年多了，最近一直在写关于PC端活动，活动中经常设计到公告栏，公告栏有多种多样，有走马灯横向显示，走马光纵向显示，还有一闪而过显示的，经过了多个活动我也写了好几个公告栏了，在这里做一下笔记。

效果

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

代码解析

这是一个从左到右的一个消息轮播展示效果，主要控制他的左边定位即可，逻辑很简单，一起来实现学习吧

核心代码就是动画效果

控制展示开始轮播

@keyframes roll {
  0% {
    left: 607px;
  }
  100% {
    left: Calc(-607px * 9);
  }
}

通过数据给容器动态设置宽度

607*noticeList.length 是因为最外层的容器显示的宽度就是只显示607像素
noticeList.length*4 则是每一个滚动动画用4秒来完成

<div class="container">
  <ul class='list' :style="{'width': 607*noticeList.length + 'px'}">
    <li v-for="item in noticeList" :style="{'animation-duration': noticeList.length*4 + 's'}">
      恭喜{{ item.reward_user_name }} 开出<span>{{ item.desc }}</span> ！
    </li>
  </ul>
</div>

最外层容器控制可展示的内容

只展示607px的像素，其他的则隐藏起来

section {
  width: 607px;
  height: 50px;
  right: 200px;
  background: #353939;
  overflow: hidden;
}

每一行的展示与一些动画效果的属性

属性	效果
linear	动画从头到尾的速度是相同的。
infinite	指定动画应该播放无限次（永远）

如果效果不满足可以查看一下动画文档

li {
  display: inline-block;
  position: relative;
  right: 0;
  width: 607px;
  color: #fff;
  line-height: 50px;
  animation: roll linear infinite;
  &:last-child{
    width: auto;
  }
}

总结

这次的公告栏消息滚动就这样，看似麻烦，实则特简单，就一个通过动画来控制显示，然而动画的应用不止这一点，好好学力，一起努力。

走马光公告栏

前言

效果

代码解析

核心代码就是动画效果

总结