vue实现slideUp动画效果

使用 CSS Transition 实现 SlideUp

在 Vue 中可以通过 CSS Transition 和动态类名实现 SlideUp 效果。定义一个 CSS 类控制高度和过渡效果，通过 Vue 的 v-if 或 v-show 触发动画。

<template>
  <div>
    <button @click="toggle">Toggle Slide</button>
    <transition name="slide">
      <div v-if="isVisible" class="content">Slide Up Content</div>
    </transition>
  </div>
</template>

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

<style>
.slide-enter-active, .slide-leave-active {
  transition: height 0.3s ease;
  overflow: hidden;
}
.slide-enter, .slide-leave-to {
  height: 0 !important;
}
.content {
  height: 100px;
  background: #eee;
}
</style>

使用 Vue Transition 钩子函数

通过 JavaScript 钩子函数实现更复杂的 SlideUp 控制，适合需要动态计算高度的情况。

<template>
  <div>
    <button @click="toggle">Toggle Slide</button>
    <transition
      @before-enter="beforeEnter"
      @enter="enter"
      @leave="leave"
      :css="false"
    >
      <div v-if="isVisible" class="content" ref="content">
        Slide Up Content
      </div>
    </transition>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isVisible: true
    }
  },
  methods: {
    toggle() {
      this.isVisible = !this.isVisible
    },
    beforeEnter(el) {
      el.style.height = '0'
    },
    enter(el) {
      el.style.height = el.scrollHeight + 'px'
    },
    leave(el) {
      el.style.height = '0'
    }
  }
}
</script>

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

使用第三方动画库

借助第三方动画库如 Animate.css 可以快速实现 SlideUp 效果，减少自定义 CSS 的工作量。

<template>
  <div>
    <button @click="toggle">Toggle Slide</button>
    <transition
      enter-active-class="animate__animated animate__slideInUp"
      leave-active-class="animate__animated animate__slideOutUp"
    >
      <div v-if="isVisible" class="content">
        Slide Up Content
      </div>
    </transition>
  </div>
</template>

<script>
import 'animate.css'
export default {
  data() {
    return {
      isVisible: true
    }
  },
  methods: {
    toggle() {
      this.isVisible = !this.isVisible
    }
  }
}
</script>

<style>
.content {
  background: #eee;
  height: 100px;
}
</style>

动态高度 SlideUp 解决方案

对于内容高度不确定的情况，可以使用 getBoundingClientRect() 或 scrollHeight 动态获取元素高度实现平滑过渡。

<template>
  <div>
    <button @click="toggle">Toggle Slide</button>
    <div class="slide-container">
      <transition name="dynamic-slide">
        <div v-if="isVisible" class="dynamic-content">
          <p v-for="n in 5" :key="n">Dynamic content line {{ n }}</p>
        </div>
      </transition>
    </div>
  </div>
</template>

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

<style>
.slide-container {
  overflow: hidden;
}
.dynamic-slide-enter-active, .dynamic-slide-leave-active {
  transition: all 0.3s ease;
}
.dynamic-slide-enter, .dynamic-slide-leave-to {
  opacity: 0;
  transform: translateY(-100%);
}
.dynamic-content {
  background: #eee;
  padding: 10px;
}
</style>