vue3 实现跑马灯

Vue 3 是一种流行的 JavaScript 框架，用于构用户界面。要实现一个跑马灯效果，可以使用 Vue 3 的动画和过渡功能。

首先，你需要在 Vue 3 项目中安装 Vue 动画库。可以通过以下命令使用 npm 安装：

npm install vue@next
npm install @vue/animation

接下来，在你的 Vue 组件中，你可以使用 `<transition>` 组件来包裹需要实现跑马灯效果的内容。例如：

<template>
  <div>
    <transition name="slide">
      <div v-if="show" class="marquee">
        <!-- 跑马灯内容 -->
      </div>
    </transition>
    <button @click="toggleMarquee">切换跑马灯</button>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const show = ref(true);

    const toggleMarquee = () => {
      show.value = !show.value;
    };

    return {
      show,
      toggleMarquee,
    };
  },
};
</script>

<style>
.slide-enter-active,
.slide-leave-active {
  transition: transform 0.5s;
}

.slide-enter,
.slide-leave-to {
  transform: translateX(100%);
}
</style>

在上面的代码中，我们使用了 `<transition>` 组件来包裹跑马灯内容，并给它一个 `name` 属性，这里我们使用了 "slide"。然后，在 CSS 样式中定义了进入和离开的动画效果。

通过点击按钮，可以切换跑马灯的显示和隐藏。你可以根据自己的需求修改代码和样式，实现更复杂的跑马灯效果。