当前位置：首页 > VUE

vue 实现jqslidedown

2026-01-07 07:46:22VUE

在 Vue 中实现类似 jQuery 的 slideDown 效果，可以通过 Vue 的过渡系统或 CSS 动画结合动态样式绑定来实现。以下是几种实现方式：

使用 Vue Transition 组件

Vue 提供了 <transition> 组件，可以方便地实现元素的展开和收起动画。

<template>
  <div>
    <button @click="toggle">Toggle Slide</button>
    <transition name="slide">
      <div v-if="isVisible" class="content">
        This content will slide down and up.
      </div>
    </transition>
  </div>
</template>

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

<style>
.slide-enter-active {
  animation: slide-down 0.5s ease-out;
}
.slide-leave-active {
  animation: slide-up 0.5s ease-out;
}
@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>

使用动态高度绑定

通过动态绑定 height 属性，结合 CSS 过渡效果，实现平滑的滑动动画。

<template>
  <div>
    <button @click="toggle">Toggle Slide</button>
    <div 
      class="slide-content" 
      :style="{ height: isVisible ? 'auto' : '0px' }"
    >
      <div class="content-inner">
        This content will slide down and up.
      </div>
    </div>
  </div>
</template>

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

<style>
.slide-content {
  overflow: hidden;
  transition: height 0.5s ease-out;
}
.content-inner {
  padding: 10px;
}
</style>

使用第三方库

如果需要更复杂的效果，可以借助第三方动画库如 vue-slide-up-down 或 animate.css。

安装 vue-slide-up-down：

npm install vue-slide-up-down

使用示例：

<template>
  <div>
    <button @click="toggle">Toggle Slide</button>
    <slide-up-down :active="isVisible">
      This content will slide down and up.
    </slide-up-down>
  </div>
</template>

<script>
import SlideUpDown from 'vue-slide-up-down';

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