vue从左到右循环自动滚动

Vue中实现从左到右循环自动滚动通常可以通过几种方法实现，其中一种是使用CSS3的`@keyframes`规则结合Vue的生命周期钩子和方法来动态改变元素的样式。下面是一个基本的实现思路：

1. 使用`@keyframes`创建一个名为`scroll`的动画，使得元素在水平方向上循环移动。
2. 在Vue组件的`mounted`钩子中，为目标元素应用这个动画。
3. 使用Vue的`setInterval`函数定期调用一个方法，该方法用于重置动画，实现循环滚动的效果。

下面是一个简单的示例代码：

<template>
  <div id="app">
    <div class="scroll-container" ref="scrollContainer">
      <!-- 循环滚动的内容 -->
      <div class="scroll-content">内容1</div>
      <div class="scroll-content">内容2</div>
      <!-- 更多内容 -->
    </div>
  </div>
</template>

<script>
export default {
  name: 'App',
  mounted() {
    // 初始化滚动动画
    this.initScrollAnimation();
    // 设置定时器，定时更新滚动状态以实现循环滚动效果
    this.scrollInterval = setInterval(() => {
      this.resetScrollAnimation();
    }, 3000); // 每3秒更新一次状态，以3秒为周期循环滚动
  },
  methods: {
    initScrollAnimation() {
      const container = this.$refs.scrollContainer;
      // 设置动画名称
      container.style.animation = 'scroll 10s linear infinite';
    },
    resetScrollAnimation() {
      const container = this.$refs.scrollContainer;
      // 更新动画播放次数，使动画从头开始
      container.style.animationPlayState = 'paused';
      void container.offsetWidth; // 触发浏览器的重绘，使得动画重新开始
      container.style.animationPlayState = 'running';
    },
  },
  beforeDestroy() {
    // 组件销毁前清除定时器，避免内存泄漏
    clearInterval(this.scrollInterval);
  }
}
</script>

<style>
@keyframes scroll {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(-100%);
  }
}
.scroll-container {
  overflow: hidden;
  white-space: nowrap;
  position: relative;
  animation: scroll 10s linear infinite;
}
.scroll-content {
  display: inline-block;
  padding: 10px;
}
</style>

在上述代码中，我们定义了一个`.scroll-container`容器，其中包含多个`.scroll-content`子元素，这些子元素将会从左到右循环滚动。