当前位置：首页 > VUE

Vue实现楼盘跳跃

2026-01-20 09:46:51VUE

Vue实现楼盘跳跃效果

楼盘跳跃效果通常指在页面上展示多个楼盘信息，并通过动画或交互方式实现切换展示。以下是几种实现方法：

使用Vue过渡动画

通过Vue的<transition>组件结合CSS动画实现平滑切换效果：

<transition name="jump" mode="out-in">
  <div v-if="currentBuilding" :key="currentBuilding.id">
    <!-- 楼盘信息展示 -->
  </div>
</transition>

.jump-enter-active, .jump-leave-active {
  transition: all 0.5s ease;
}
.jump-enter {
  transform: translateY(100%);
  opacity: 0;
}
.jump-leave-to {
  transform: translateY(-100%);
  opacity: 0;
}

结合Swiper组件实现

安装swiper插件后创建轮播效果：

npm install swiper vue-awesome-swiper

import { Swiper, SwiperSlide } from 'swiper/vue'
export default {
  components: { Swiper, SwiperSlide },
  setup() {
    return {
      buildings: [...] // 楼盘数据数组
    }
  }
}

<swiper :effect="'coverflow'" :grabCursor="true" :centeredSlides="true">
  <swiper-slide v-for="building in buildings" :key="building.id">
    <!-- 单个楼盘卡片 -->
  </swiper-slide>
</swiper>

实现手动切换动画

通过动态样式绑定实现点击跳跃效果：

data() {
  return {
    activeIndex: 0,
    buildings: [...],
    jumping: false
  }
},
methods: {
  jumpTo(index) {
    if(this.jumping) return
    this.jumping = true
    // 添加跳跃动画类
    setTimeout(() => {
      this.activeIndex = index
      setTimeout(() => this.jumping = false, 500)
    }, 300)
  }
}

<div 
  v-for="(building, index) in buildings"
  :class="{ 'jump-active': activeIndex === index, 'jumping': jumping }"
  @click="jumpTo(index)">
  <!-- 内容 -->
</div>

使用GSAP实现高级动画

安装GSAP库实现更复杂的跳跃效果：

npm install gsap

import { gsap } from 'gsap'
methods: {
  animateJump(newIndex) {
    const current = this.$refs.buildings[this.currentIndex]
    const next = this.$refs.buildings[newIndex]

    gsap.to(current, {
      y: -100,
      opacity: 0,
      duration: 0.3
    })

    gsap.fromTo(next, 
      { y: 100, opacity: 0 },
      { y: 0, opacity: 1, duration: 0.3 }
    )

    this.currentIndex = newIndex
  }
}

响应式布局考虑

确保在不同设备上都有良好的展示效果：

Vue实现楼盘跳跃

.building-card {
  width: 300px;
  transition: transform 0.3s;
}
@media (max-width: 768px) {
  .building-card {
    width: 80%;
    margin: 0 auto;
  }
}