CSS动效 - 技术栈

1. 卡片切换动画

html 复制代码
<template>
  <div class="page">
    <h1>卡片切换动画</h1>
    <van-button type="primary" @click="handleSwitch">切换</van-button>
    <div class="container">
      <div class="list" :class="{ enter: activeListIndex === 1, leave: activeListIndex !== 1 }">
        <div v-for="item in list1" :key="item.value" class="card">{{ item.label }}</div>
      </div>
      <div class="list" :class="{ enter: activeListIndex === 2, leave: activeListIndex !== 2 }">
        <div v-for="item in list2" :key="item.value" class="card">{{ item.label }}</div>
      </div>
    </div>
  </div>
</template>

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

const list1 = ref([
  {
    label: '卡片1',
    value: 1
  },
  {
    label: '卡片2',
    value: 2
  },
  {
    label: '卡片3',
    value: 3
  }
])

const list2 = ref([
  {
    label: 'card4',
    value: 4
  },
  {
    label: 'card5',
    value: 5
  },
  {
    label: 'card6',
    value: 6
  }
])

const activeListIndex = ref(1)
function handleSwitch() {
  activeListIndex.value = activeListIndex.value === 1 ? 2 : 1
}
</script>

<style lang="scss" scoped>
.page {
  width: 100%;
  height: 100%;
  padding: 10px;
  color: #ffffff;
  background-color: black;

  .container {
    width: 100%;
    height: 80px;
    border: 1px solid #ccc;
    margin-top: 10px;
    padding: 0 10px;
    position: relative;
    overflow: hidden;

    .list {
      width: 100%;
      height: 100%;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      overflow-x: auto;
      gap: 10px;
      transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out;
      backface-visibility: hidden;
      position: absolute;

      &.enter {
        opacity: 1;
        transform: translateY(0);
        z-index: 2;
      }

      &.leave {
        opacity: 0;
        transform: translateY(100%);
        z-index: 1;
      }
    }

    .card {
      width: 60px;
      height: 60px;
      background-color: #404040;
      border-radius: 6rem;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }
  }
}
</style>