当前位置：首页 > VUE

vue 实现jqslidedown

2026-02-09 23:16:38VUE

在 Vue 中实现类似 jQuery 的 slideDown 效果，可以通过 Vue 的过渡系统或 CSS 动画实现。以下是几种常见方法：

使用 Vue Transition 组件

Vue 的 <transition> 组件结合 CSS 可以实现滑动效果。通过设置 height 从 0 到自动高度的过渡：

<template>
  <div>
    <button @click="show = !show">Toggle Slide</button>
    <transition name="slide">
      <div v-if="show" class="content">滑动内容</div>
    </transition>
  </div>
</template>

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

<style>
.slide-enter-active, .slide-leave-active {
  transition: height 0.3s ease;
  overflow: hidden;
}
.slide-enter, .slide-leave-to {
  height: 0 !important;
}
.slide-enter-to, .slide-leave {
  height: auto;
}
</style>

使用动态计算高度

如果内容高度不确定，可以通过 JavaScript 动态计算高度：

<template>
  <div>
    <button @click="toggleSlide">Toggle Slide</button>
    <div ref="content" class="content" :style="{ height: currentHeight + 'px' }">
      滑动内容
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isOpen: false,
      currentHeight: 0
    };
  },
  methods: {
    toggleSlide() {
      this.isOpen = !this.isOpen;
      if (this.isOpen) {
        this.currentHeight = this.$refs.content.scrollHeight;
      } else {
        this.currentHeight = 0;
      }
    }
  }
};
</script>

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

使用第三方库

如果需要更复杂的动画效果，可以集成第三方动画库如 animate.css 或 GSAP：

<template>
  <div>
    <button @click="show = !show">Toggle Slide</button>
    <transition
      enter-active-class="animate__animated animate__slideInDown"
      leave-active-class="animate__animated animate__slideOutUp"
    >
      <div v-if="show" class="content">滑动内容</div>
    </transition>
  </div>
</template>

<script>
import 'animate.css';
export default {
  data() {
    return {
      show: false
    };
  }
};
</script>