vue大屏轮播（跑马灯）实现思路

<template>
  <div class="marquee-container">
    <div class="marquee-content" :style="marqueeStyle">
      <slot></slot>
    </div>
  </div>
</template>
 
<script>
export default {
  name: 'MarqueeComponent',
  props: {
    duration: {
      type: Number,
      default: 20, // 单位秒
    },
    direction: {
      type: String,
      default: 'left',
    },
  },
  computed: {
    marqueeStyle() {
      return {
        'animation-duration': `${this.duration}s`,
        'animation-name': `marquee-${this.direction}`,
      };
    },
  },
  mounted() {
    this.$emit('ready');
  },
};
</script>
 
<style scoped>
@keyframes marquee-left {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(-100%);
  }
}
 
@keyframes marquee-right {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(100%);
  }
}
 
.marquee-container {
  overflow: hidden;
  white-space: nowrap;
}
 
.marquee-content {
  display: inline-block;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-play-state: running;
}
</style>

这个Vue组件实现了一个无限滚动的跑马灯效果，可以通过调整duration和direction属性来控制动画的速度和方向。使用<slot></slot>允许父组件传入跑马灯内容。在样式中定义了两个动画，分别对应向左和向右滚动。使用animation-name根据传入的direction属性动态选择正确的动画。