vue3实现文字垂直滚动

嘘~！2024-05-08 1:08

在Vue 3中实现文字的垂直滚动，你可以使用CSS动画或者JavaScript来控制滚动行为。以下是一个简单的Vue 3组件示例，该组件使用CSS的@keyframes动画来实现文字的垂直滚动效果：

javascript 复制代码

<template>  
  <div class="vertical-scroll-text">  
    <div class="text-container">  
      <p class="scrolling-text">{{ text }}</p>  
    </div>  
  </div>  
</template>  
  
<script>  
export default {  
  data() {  
    return {  
      text: '这是一段垂直滚动的文字...',  
    };  
  },  
};  
</script>  
  
<style scoped>  
.vertical-scroll-text {  
  height: 200px; /* 设置容器高度 */  
  overflow: hidden; /* 隐藏超出容器的部分 */  
  position: relative; /* 相对于容器定位 */  
}  
  
.text-container {  
  animation: scrollVertically 5s linear infinite; /* 应用滚动动画 */  
  will-change: transform; /* 提示浏览器此元素将更改其变换，可能提高渲染性能 */  
}  
  
@keyframes scrollVertically {  
  0% {  
    transform: translateY(100%); /* 初始位置在容器外部 */  
  }  
  100% {  
    transform: translateY(-100%); /* 结束时滚动到容器的另一侧 */  
  }  
}  
  
.scrolling-text {  
  line-height: 50px; /* 设置行高以匹配容器高度或动画效果 */  
  white-space: nowrap; /* 防止文字换行 */  
}  
</style>

在这个例子中，.vertical-scroll-text是包含滚动文本的容器，.text-container是应用滚动动画的容器，.scrolling-text是包含滚动文本的段落。

CSS的@keyframes scrollVertically定义了一个名为scrollVertically的动画，它会使.text-container元素在5秒内从容器顶部滚动到底部，并无限循环。transform: translateY(100%)将元素向下移动其自身高度的100%，即完全移出容器；transform: translateY(-100%)则将其向上移动其自身高度的100%，即移动到容器的上方。

你可以根据需求调整height、line-height、animation的持续时间等属性来改变滚动效果。如果你需要更复杂的滚动逻辑（如滚动到特定位置、控制滚动速度等），你可能需要使用JavaScript来操作DOM元素的滚动位置。