利用css实现大屏新闻数据无缝滚动

前言：前段时间做大屏，需求要求实现新闻数据无缝滚动，数据数据是不固定的，而且每一分钟还要重新获取最新的新闻数据动态，之前是用定时器实现无缝滚动，但是性能不好，页面容易卡顿，然后突然想起来上大学的时候用css做过一个图片无缝滚动，灵机一动我就换了一个思路实现它。接下来上才艺
效果：在这里

我简单整理了一下，希望可以帮到你

<template>
  <div>
    <div id="bs_scroll_content" ref="boxHeight" class="bs_scroll_content">
      <div
        @mouseenter="Stop"
        @mouseleave="Up"
        class="bs-content"
        :class="openAnim ? 'active' : 'paused'"
        :style="rowup"
        ref="box"
      >
        <div
          :id="'single' + index"
          v-for="(item, index) in listData"
          :key="index"
          class="itemStyle"
        >
          {{ item.name }}
        </div>
      </div>
      <div
        @mouseenter="Stop"
        @mouseleave="Up"
        class="bs-content"
        :class="openAnim ? 'active' : 'paused'"
        :style="rowup"
      >
        <div
          :id="'single' + index"
          v-for="(item, index) in listData"
          :key="index"
          class="itemStyle"
        >
          {{ item.name }}
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'DynamicBox',
  data() {
    return {
      listData: [
        { name: '最近怎么咋样，过的好吗？我的盆友们' },
        { name: '最近怎么咋样，过的好吗？我的盆友们' },
        { name: '最近怎么咋样，过的好吗？我的盆友们' },
        { name: '最近怎么咋样，过的好吗？我的盆友们' },
        { name: '最近怎么咋样，过的好吗？我的盆友们' },
        { name: '最近怎么咋样，过的好吗？我的盆友们' },
        { name: '最近怎么咋样，过的好吗？我的盆友们' },
        { name: '最近怎么咋样，过的好吗？我的盆友们' },
        { name: '最近怎么咋样，过的好吗？我的盆友们' },
        { name: '最近怎么咋样，过的好吗？我的盆友们' },
        { name: '最近怎么咋样，过的好吗？我的盆友们' },
        { name: '最近怎么咋样，过的好吗？我的盆友们' }
      ], //数据
      totalHeight: 0, //内容的高度
      openAnim: true, //是否开启滚动效果 true 开  false关
      timer: 40, //滚动步数  值越大滚动越快
      rowup: {} //设置动画效果
    };
  },
  mounted() {
    this.getDynamic();
  },
  methods: {
    // 实时动态
    getDynamic() {
      // 这里也可以请求后台数据
      this.$nextTick(() => {
        this.totalHeight = '-' + this.$refs.box.offsetHeight + 'px';
        const boxHeight = this.$refs.box.offsetHeight; //内容高度
        this.handleStpe(boxHeight);
        this.addKeyFrames(this.totalHeight);
      });
    },
    // 设置滚动速度，动画效果
    handleStpe(boxHeight) {
      this.rowup = {
        ' -webkit-animation': '70s rowup linear infinite',
        animation: `${Math.floor(
          (boxHeight * 1000) / this.timer
        )}ms rowup linear infinite`,
        position: 'relative'
      };
    },
    // 跑马灯
    addKeyFrames(y) {
      const style = document.createElement('style');
      style.type = 'text/css';
      const keyFrames = `\
    @-webkit-keyframes rowup {\
        0% {\
            -webkit-transform: translate3d(0, 0, 0);\
            transform: translate3d(0, 0, 0);\
        }\
        100% {\
            -webkit-transform: translate3d(0, A_DYNAMIC_VALUE, 0);\
            transform: translate3d(0, A_DYNAMIC_VALUE, 0);\
        }\
    }`;
      style.innerHTML = keyFrames.replace(/A_DYNAMIC_VALUE/g, y);
      document.getElementsByTagName('head')[0].appendChild(style);
    },
    // 停止动画
    Stop() {
      this.openAnim = !this.openAnim;
    },
    // 开始动画
    Up() {
      this.openAnim = true;
    }
  }
};
</script>
<style lang="scss" scoped>
.bs_scroll_content {
  width: 300px;
  height: 400px;
  overflow: hidden;
  background: #fff;
  margin: 200px auto;
  border: 1px solid #ccc;
  border-radius: 6px;
  overflow: hidden;
}

.bs-content {
  position: relative;
  overflow: hidden;
  transition: all 0ms ease-in 0s;
}

//静态页面的动画，不能根据数据的多少调整滚动的速度，如果是固定数据量可以这样写
// .bs_scroll_content .rowup {
//   // -webkit-animation: 1000s rowup linear infinite;
//   // animation: 1000s rowup linear infinite;
//   position: relative;
// }

.active {
  animation-play-state: running !important;
}
.paused {
  animation-play-state: paused !important;
}

.itemStyle {
  height: 40px;
  line-height: 40px;
  padding-left: 24px;
  overflow: hidden;
  border-bottom: 1px solid #ccc;
}
</style>