vue实现slideup效果

Vue 实现 SlideUp 效果

在 Vue 中实现 SlideUp 效果可以通过 CSS 过渡、动画或第三方库完成。以下是几种常见方法：

使用 CSS 过渡

通过 Vue 的过渡系统结合 CSS 实现滑动效果：

<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: all 0.5s ease;
  max-height: 100px; /* 设置最大高度 */
  overflow: hidden;
}

.slide-enter, .slide-leave-to {
  max-height: 0;
  opacity: 0;
}
</style>

使用 GSAP 动画库

通过 GSAP 实现更复杂的滑动效果：

<template>
  <div>
    <button @click="toggleSlide">Toggle Slide</button>
    <div ref="slideContent" class="content">滑动内容</div>
  </div>
</template>

<script>
import { gsap } from 'gsap'

export default {
  data() {
    return {
      isVisible: false
    }
  },
  methods: {
    toggleSlide() {
      this.isVisible = !this.isVisible
      if (this.isVisible) {
        gsap.to(this.$refs.slideContent, {
          height: 'auto',
          duration: 0.5,
          ease: 'power2.out'
        })
      } else {
        gsap.to(this.$refs.slideContent, {
          height: 0,
          duration: 0.5,
          ease: 'power2.in'
        })
      }
    }
  }
}
</script>

<style>
.content {
  height: 0;
  overflow: hidden;
}
</style>

使用 Vue Transition 组件

结合 Vue 的 Transition 组件和 CSS transform 实现：

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

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

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

.slide-up-enter, .slide-up-leave-to {
  transform: translateY(100%);
  opacity: 0;
}

.box {
  background: #42b983;
  padding: 20px;
  margin-top: 10px;
}
</style>

使用第三方组件库

如果项目中使用 UI 库如 Element UI 或 Vuetify，可以直接使用内置的过渡效果：

<template>
  <el-collapse-transition>
    <div v-show="show">
      滑动内容
    </div>
  </el-collapse-transition>
</template>

<script>
import { CollapseTransition } from 'element-ui'

export default {
  components: {
    'el-collapse-transition': CollapseTransition
  },
  data() {
    return {
      show: true
    }
  }
}
</script>

以上方法可根据项目需求选择，CSS 过渡适合简单效果，GSAP 适合复杂动画，第三方库可快速集成现成解决方案。