vue实现slidedown

Vue 实现 SlideDown 效果

SlideDown 是一种常见的动画效果，通常用于展开元素。以下是几种在 Vue 中实现 SlideDown 效果的方法。

使用 CSS Transition 实现

通过 Vue 的 v-show 或 v-if 结合 CSS Transition 实现 SlideDown 效果。

<template>
  <div>
    <button @click="toggle">Toggle Slide</button>
    <div class="slide-container" ref="slideContainer">
      <div class="slide-content" v-show="isOpen">
        This is the content that slides down.
      </div>
    </div>
  </div>
</template>

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

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

.slide-content.v-show {
  max-height: 500px; /* Adjust based on content height */
}
</style>

使用 Vue Transition 组件

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

<template>
  <div>
    <button @click="toggle">Toggle Slide</button>
    <transition name="slide">
      <div class="slide-content" v-show="isOpen">
        This is the content that slides 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;
  overflow: hidden;
}

.slide-enter, .slide-leave-to {
  max-height: 0;
}

.slide-enter-to, .slide-leave {
  max-height: 500px; /* Adjust based on content height */
}
</style>

动态计算高度

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

<template>
  <div>
    <button @click="toggle">Toggle Slide</button>
    <div class="slide-container" ref="slideContainer">
      <div class="slide-content" :style="{ maxHeight: isOpen ? contentHeight + 'px' : '0' }">
        This is the content that slides down.
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isOpen: false,
      contentHeight: 0
    };
  },
  mounted() {
    this.contentHeight = this.$refs.slideContainer.scrollHeight;
  },
  methods: {
    toggle() {
      this.isOpen = !this.isOpen;
    }
  }
};
</script>

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

使用第三方库

如果需要更复杂的动画效果，可以考虑使用第三方库如 vue-slide-up-down。

安装：

npm install vue-slide-up-down

使用：

<template>
  <div>
    <button @click="toggle">Toggle Slide</button>
    <slide-up-down :active="isOpen">
      This is the content that slides down.
    </slide-up-down>
  </div>
</template>

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

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

以上方法可以根据具体需求选择使用。CSS Transition 和 Vue Transition 组件适合简单场景，动态计算高度适合内容高度不确定的情况，第三方库则提供了更多功能和便利性。