vue实现图片堆叠伸展

实现图片堆叠伸展效果

在Vue中实现图片堆叠伸展效果可以通过CSS和Vue的响应式特性结合完成。以下是具体实现方法：

使用CSS transform和transition

通过CSS的transform属性实现堆叠效果，transition实现平滑动画：

<template>
  <div class="stack-container">
    <div 
      v-for="(image, index) in images" 
      :key="index"
      :class="['stack-item', { active: activeIndex === index }]"
      @click="setActive(index)"
    >
      <img :src="image.src" :alt="image.alt">
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeIndex: 0,
      images: [
        { src: 'image1.jpg', alt: 'Image 1' },
        { src: 'image2.jpg', alt: 'Image 2' },
        { src: 'image3.jpg', alt: 'Image 3' }
      ]
    }
  },
  methods: {
    setActive(index) {
      this.activeIndex = index
    }
  }
}
</script>

<style>
.stack-container {
  position: relative;
  width: 300px;
  height: 200px;
}

.stack-item {
  position: absolute;
  width: 100%;
  height: 100%;
  transition: transform 0.3s ease;
  transform-origin: center bottom;
}

.stack-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.stack-item:not(.active) {
  transform: scale(0.9) translateY(10px);
  z-index: 1;
  filter: brightness(0.8);
}

.stack-item.active {
  transform: scale(1);
  z-index: 2;
}
</style>

使用Vue Transition组件

结合Vue的Transition组件实现更复杂的动画效果：

<template>
  <div class="stack-gallery">
    <TransitionGroup name="stack" tag="div" class="stack-wrapper">
      <div 
        v-for="(img, i) in images" 
        :key="img.id"
        :class="['stack-card', { 'active': activeCard === i }]"
        @click="activeCard = i"
      >
        <img :src="img.url" :alt="img.title">
      </div>
    </TransitionGroup>
  </div>
</template>

<style>
.stack-gallery {
  perspective: 1000px;
}

.stack-wrapper {
  position: relative;
  width: 300px;
  height: 400px;
}

.stack-card {
  position: absolute;
  width: 100%;
  height: 100%;
  transition: all 0.5s cubic-bezier(0.22, 1, 0.36, 1);
  transform-origin: center bottom;
}

.stack-card:not(.active) {
  transform: scale(0.85) translateY(30px);
  z-index: 1;
  opacity: 0.8;
}

.stack-card.active {
  transform: scale(1);
  z-index: 10;
}

.stack-enter-active,
.stack-leave-active {
  transition: all 0.5s ease;
}

.stack-enter-from,
.stack-leave-to {
  opacity: 0;
  transform: translateY(20px) scale(0.95);
}
</style>

响应式堆叠布局

实现根据屏幕大小调整堆叠数量的响应式效果：

computed: {
  visibleImages() {
    const maxVisible = this.$vuetify.breakpoint.smAndDown ? 3 : 5
    return this.images.slice(0, maxVisible)
  }
}

@media (max-width: 768px) {
  .stack-item {
    transform: scale(0.85) translateY(15px);
  }

  .stack-item.active {
    transform: scale(0.95);
  }
}

3D堆叠效果

添加3D变换增强视觉效果：

.stack-container {
  transform-style: preserve-3d;
}

.stack-item:not(.active) {
  transform: 
    scale(0.9) 
    translateY(20px) 
    rotateX(10deg);
  box-shadow: 0 10px 20px rgba(0,0,0,0.2);
}

.stack-item.active {
  transform: 
    scale(1) 
    translateY(0) 
    rotateX(0);
  box-shadow: 0 15px 30px rgba(0,0,0,0.3);
}

以上方法可以根据实际需求组合使用，调整transform参数和过渡时间可获得不同的视觉效果。对于更复杂的需求，可以考虑使用GSAP等动画库实现更精细的控制。