当前位置：首页 > VUE

vue实现下滑

2026-03-29 19:54:18VUE

Vue 实现下滑效果

方法一：使用 CSS 动画

在 Vue 组件中，通过添加 CSS 类名实现下滑效果。

vue实现下滑

<template>
  <div :class="{ 'slide-down': isActive }" @click="toggleSlide">
    点击下滑
  </div>
</template>

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

<style>
.slide-down {
  transition: transform 0.3s ease;
  transform: translateY(100px);
}
</style>

方法二：使用 Vue Transition 组件

利用 Vue 内置的 Transition 组件实现更复杂的效果。

vue实现下滑

<template>
  <button @click="show = !show">切换下滑</button>
  <Transition name="slide">
    <div v-if="show" class="content">
      下滑显示的内容
    </div>
  </Transition>
</template>

<script>
export default {
  data() {
    return {
      show: false
    }
  }
}
</script>

<style>
.slide-enter-active, .slide-leave-active {
  transition: all 0.5s ease;
}
.slide-enter-from, .slide-leave-to {
  transform: translateY(-100%);
  opacity: 0;
}
</style>

方法三：结合第三方动画库

使用 animate.css 等第三方库快速实现下滑效果。

<template>
  <div 
    class="animate__animated" 
    :class="{ 'animate__slideInDown': isActive }"
    @click="toggleAnimation"
  >
    点击下滑
  </div>
</template>

<script>
import 'animate.css'
export default {
  data() {
    return {
      isActive: false
    }
  },
  methods: {
    toggleAnimation() {
      this.isActive = !this.isActive
    }
  }
}
</script>

方法四：使用 JavaScript 计算位置

通过 ref 获取元素位置并动态计算。

<template>
  <div ref="slideElement" class="slide-element">
    可下滑元素
  </div>
  <button @click="slideDown">下滑</button>
</template>

<script>
export default {
  methods: {
    slideDown() {
      const element = this.$refs.slideElement
      let pos = 0
      const interval = setInterval(() => {
        if (pos >= 100) {
          clearInterval(interval)
        } else {
          pos += 2
          element.style.transform = `translateY(${pos}px)`
        }
      }, 10)
    }
  }
}
</script>