当前位置：首页 > VUE

vue实现下滑

2026-03-09 08:14:57VUE

Vue 实现下滑效果的方法

在 Vue 中实现下滑效果可以通过多种方式实现，包括使用原生 JavaScript、CSS 动画或第三方库。以下是几种常见的方法：

使用 CSS Transition 实现平滑下滑

通过 Vue 的动态绑定和 CSS Transition 实现平滑的下滑动画效果。

vue实现下滑

<template>
  <div>
    <button @click="toggle">Toggle</button>
    <div 
      class="slide-content" 
      :style="{ height: isOpen ? '200px' : '0px' }"
    >
      Content to slide down
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isOpen: false
    }
  },
  methods: {
    toggle() {
      this.isOpen = !this.isOpen
    }
  }
}
</script>

<style>
.slide-content {
  overflow: hidden;
  transition: height 0.3s ease;
}
</style>

使用 Vue Transition 组件

Vue 提供了内置的 <transition> 组件，可以方便地实现动画效果。

vue实现下滑

<template>
  <div>
    <button @click="toggle">Toggle</button>
    <transition name="slide">
      <div v-if="isOpen" class="content">
        Content to slide down
      </div>
    </transition>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isOpen: false
    }
  },
  methods: {
    toggle() {
      this.isOpen = !this.isOpen
    }
  }
}
</script>

<style>
.slide-enter-active, .slide-leave-active {
  transition: max-height 0.3s ease;
}
.slide-enter, .slide-leave-to {
  max-height: 0;
}
.slide-enter-to, .slide-leave {
  max-height: 200px;
}
.content {
  overflow: hidden;
}
</style>

使用第三方动画库（如 GSAP）

如果需要更复杂的动画效果，可以使用 GSAP（GreenSock Animation Platform）库。

<template>
  <div>
    <button @click="toggle">Toggle</button>
    <div ref="slideContent" class="content">
      Content to slide down
    </div>
  </div>
</template>

<script>
import { gsap } from 'gsap'

export default {
  data() {
    return {
      isOpen: false
    }
  },
  methods: {
    toggle() {
      this.isOpen = !this.isOpen
      if (this.isOpen) {
        gsap.to(this.$refs.slideContent, { height: '200px', duration: 0.3 })
      } else {
        gsap.to(this.$refs.slideContent, { height: '0px', duration: 0.3 })
      }
    }
  }
}
</script>

<style>
.content {
  height: 0;
  overflow: hidden;
}
</style>

使用动态组件和动画

结合动态组件和动画，可以实现更灵活的下滑效果。

<template>
  <div>
    <button @click="toggle">Toggle</button>
    <transition name="slide">
      <div v-if="isOpen" class="content">
        <slot></slot>
      </div>
    </transition>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isOpen: false
    }
  },
  methods: {
    toggle() {
      this.isOpen = !this.isOpen
    }
  }
}
</script>

<style>
.slide-enter-active {
  animation: slide-down 0.3s ease;
}
.slide-leave-active {
  animation: slide-up 0.3s ease;
}
@keyframes slide-down {
  from { transform: translateY(-100%); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
@keyframes slide-up {
  from { transform: translateY(0); opacity: 1; }
  to { transform: translateY(-100%); opacity: 0; }
}
.content {
  overflow: hidden;
}
</style>