基于 Vue 和 CSS 实现的垂直滚动效果

奥德坤2024-12-17 21:59

本文档简要介绍了如何通过 Vue.js 和 CSS 动画 实现一个带有垂直滚动效果的组件，并通过在动画中插入停顿，模拟类似翻页的效果。

1. Vue 组件结构

1.1 模板部分 (`<template>`)

html 复制代码

<template>
  <div class="line1 flex">
    <div class="scroll-container">
      <div class="flex">
        <Icon name="8888" value="0000" />
        <Icon name="8888" value="0000" />
      </div>
      <div class="flex">
        <Icon name="8888" value="1111" />
        <Icon name="8888" value="1111" />
      </div>
    </div>
    <div class="scroll-container">
      <div class="flex">
        <Icon name="8888" value="0000" />
        <Icon name="8888" value="0000" />
      </div>
      <div class="flex">
        <Icon name="8888" value="1111" />
        <Icon name="8888" value="1111" />
      </div>
    </div>
  </div>
</template>

要点：

使用 <Icon /> 组件显示滚动内容。
<div class="scroll-container"> 用于包裹滚动内容，执行滚动动画。

1.2 动画设置 (`<style scoped>`)

css 复制代码

.line1 {
  display: flex;
  flex-direction: column; /* 垂直排列 */
  overflow: hidden;
  height: 100px; /* 设置可视区域高度 */
}

.scroll-container {
  display: flex;
  flex-direction: column; 
  animation: translateY 5s infinite linear;
}

@keyframes translateY {
  0% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(0); /* 停顿 */
  }
  50% {
    transform: translateY(-50%); /* 滚动至中间 */
  }
  90% {
    transform: translateY(-50%); /* 停顿 */
  }
  100% {
    transform: translateY(-100%); /* 滚动至顶部 */
  }
}

要点：

@keyframes translateY：定义滚动动画，使用停顿阶段（如 40% 和 90%）来模拟翻页效果。
animation ：通过 animation: translateY 5s infinite linear; 使得容器内的内容在 5 秒内实现平滑循环的垂直滚动。

2. 核心概念

2.1 垂直滚动效果

使用 @keyframes 实现垂直滚动，控制内容从当前位置平滑滚动到顶部并重复。

2.2 停顿效果

通过在关键帧中设置相同的 transform 值（如 40% 和 90%）来插入停顿，让滚动过程更像翻页。

2.3 Flex 布局

flex-direction: column;：确保内容垂直排列。
overflow: hidden;：隐藏超出容器范围的部分，确保内容只在设定区域内显示。