vue3 列表自动滚动绚丽

### Vue3 中实现列表自动滚动并带有绚丽动画效果

在 Vue3 应用程序中创建具有自动滚动功能且视觉上吸引人的列表，可以利用 `transition-group` 和 CSS 动画来完成。下面是一个详细的指南以及如何使这种体验更加生动。

#### 使用 transition-group 创建基础的列表动画

对于列表项的变化，Vue 提供了 `<transition-group>` 标签用于处理元素进入和离开时的状态转换。这允许开发者定义自定义样式或类名以便更好地控制这些时刻发生的任何视觉反馈[^1]。

<template>
  <ul class="list">
    <transition-group name="slide-fade" tag="div">
      <li v-for="(item, index) in items" :key="index">{{ item }}</li>
    </transition-group>
  </ul>
</template>

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

const items = ref(['Item A', 'Item B', 'Item C']);
setInterval(() => {
  const first = items.value.shift();
  if (first !== undefined) items.value.push(first);
}, 2000); // 自动滚动间隔时间设置为两秒
</script>

<style scoped>
.list li {
  display: block;
}

.slide-fade-enter-active,
.slide-fade-leave-active {
  transition: all .5s ease-out;
}
.slide-fade-enter-from,
.slide-fade-leave-to {
  transform: translateX(20px);
  opacity: 0;
}
</style>

这段代码展示了基本的滑入/滑出效果；然而，要达到更复杂、更具吸引力的结果，则需进一步探索CSS3 的潜力[^2]。

#### 增强动画效果至更高层次

为了增加更多维度上的互动性和美感，可以通过引入三维变换和其他高级特性如透视(perspective)，旋转(transform: rotateY())等方法让页面元素呈现出空间感十足的动作序列。这里给出一个例子：

/* 添加到之前的 style 部分 */
@keyframes spinAround {
  from {
    transform: perspective(800px) rotateY(0deg);
  }
  to {
    transform: perspective(800px) rotateY(-360deg);
  }
}

.spin-item {
  animation-name: spinAround;
  animation-duration: 4s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

将 `.spin-item` 类应用到特定项目上即可看到连续不断的翻转动作。当然这只是冰山一角——实际上可以根据需求调整参数甚至组合多种不同类型的动画以创造出独一无二的效果。

#### 结合 hover 进行动态交互设计

为了让用户体验更为流畅自然，在某些情况下可能还需要考虑用户的即时操作行为所带来的影响。例如当用户悬停于某个按钮之上时触发额外的过渡效果能够有效提升界面友好度[^3]。

button:hover::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba($color: #fff, $alpha: 0.7);
  z-index: -1;

  /* 平滑渐变 */
  transition-property: transform;
  transition-duration: 0.3s;
  transition-timing-function: cubic-bezier(.4, 0, .2, 1);

  transform-origin: center;
  transform: scale(1);
  
  &:active {
    transform: scale(0.95);
  }
}

上述 SCSS 片段描述了一个简单的放大缩小反应机制，它会在按下期间轻微收缩再恢复原状，给人一种触觉响应的感觉。

---