slidedown在Vue.js中的實現

在Vue.js中實現slidedown效果，可以使用Vue.js的過渡動畫和transition組件來實現。以下是一個簡單的示例代碼：

<template>
  <div>
    <button @click="toggleSlide">Toggle Slide</button>
    <transition name="slide">
      <div v-if="showSlide" class="slide-down">
        <!-- Your content here -->
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
      </div>
    </transition>
  </div>
</template>

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

<style>
.slide-down-enter-active, .slide-down-leave-active {
  transition: all 0.5s;
}

.slide-down-enter, .slide-down-leave-to {
  transform: translateY(-100%);
}
</style>

在這個示例中，我們在<transition>組件中使用了name屬性來定義過渡的名稱為"slide"。在CSS中，我們定義了slide-down-enter和slide-down-leave-to類來實現下滑的動畫效果，同時設置了transition屬性來控制動畫的持續時間。當點擊按鈕時，通過toggleSlide方法來控制showSlide的值，從而控制內容的顯示與隱藏。整個過渡效果會在內容改變時自動觸發。