Vue 实现垂直文字滚动效果-Vue.js-PHP中文网

Vue 实现垂直文字滚动效果

夜晨

发布： 2024-12-08 07:46:12

原创

597人浏览过

Vue中实现垂直文字滚动效果需要如下步骤：定义垂直滚动的容器样式（.vertical-scroll-container），并设置其高度和溢出属性。定义文本内容的样式（.vertical-scroll-content），将其定位绝对，并在顶部初始化其位置。在Vue组件中使用transition过渡动画，定义文本内容移动的动画效果。使用CSS定义过渡效果（.vertical-scroll-enter-active和.vertical-scroll-leave-active），设定过渡时间和过渡类型。

Vue 实现垂直文字滚动效果

Vue 实现垂直文字滚动效果

Vue 中实现垂直文字滚动效果需要使用 CSS 和 Vue 的过渡动画功能。

CSS

首先，使用 CSS 定义垂直滚动的容器样式：

立即学习“前端免费学习笔记（深入）”；

.vertical-scroll-container {
  height: 500px;  /* 容器高度 */
  overflow: hidden;
  position: relative;
}

登录后复制

然后，定义文本内容的样式：

.vertical-scroll-content {
  position: absolute;
  top: 0;  /* 初始位置 */
  height: 100%;
  white-space: nowrap;
}

登录后复制

Vue 过渡动画

接下来，在 Vue 组件中，使用 transition 过渡动画控制文本内容的移动：

<template>
  <div class="vertical-scroll-container">
    <transition name="vertical-scroll">
      <div class="vertical-scroll-content">{{ text }}</div>
    </transition>
  </div>
</template>

<script>
import { ref } from 'vue'

export default {
  setup() {
    const text = ref('垂直滚动文本')

    return {
      text
    }
  }
}
</script>

登录后复制

CSS 过渡效果

最后，使用 CSS 定义过渡效果：

.vertical-scroll-enter-active,
.vertical-scroll-leave-active {
  transition: top 1s ease-in-out;
}

.vertical-scroll-enter-from {
  top: 100%;  /* 从顶部进入 */
}

.vertical-scroll-leave-to {
  top: -100%;  /* 离开到底部 */
}

登录后复制

运行效果

当 text 数据发生变化时，Vue 将触发过渡动画。文字内容将从顶部进入容器，然后向下滚动，最后从底部离开容器。

注意事项