当前位置：首页 > VUE

vue实现slideUp动画效果

2026-01-23 12:50:31VUE

使用 Vue Transition 实现 SlideUp 动画

Vue 的 <transition> 组件可以结合 CSS 实现 slideUp 效果。通过定义进入和离开的动画类，控制元素的高度和透明度变化。

vue实现slideUp动画效果

<template>
  <button @click="show = !show">Toggle Slide</button>
  <transition name="slide-up">
    <div v-if="show" class="box">Content to slide up</div>
  </transition>
</template>

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

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

.slide-up-enter-from,
.slide-up-leave-to {
  opacity: 0;
  transform: translateY(20px);
}
</style>

使用第三方库（如 Velocity.js）

对于更复杂的动画效果，可以集成 Velocity.js 等动画库。

vue实现slideUp动画效果

<template>
  <button @click="show = !show">Toggle Slide</button>
  <transition
    @enter="enter"
    @leave="leave"
    :css="false"
  >
    <div v-if="show" class="box">Content with Velocity.js</div>
  </transition>
</template>

<script>
import Velocity from 'velocity-animate'

export default {
  data() {
    return {
      show: false
    }
  },
  methods: {
    enter(el, done) {
      Velocity(el, { opacity: 1, translateY: 0 }, { duration: 300, complete: done })
    },
    leave(el, done) {
      Velocity(el, { opacity: 0, translateY: '20px' }, { duration: 300, complete: done })
    }
  }
}
</script>

动态高度 SlideUp（适用于不确定高度的元素）

通过 JavaScript 动态计算元素高度，实现更平滑的展开/折叠效果。

<template>
  <button @click="toggle">Toggle Slide</button>
  <div class="slide-container">
    <div ref="content" class="slide-content" :style="{ height }">
      <p>Dynamic content with variable height</p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isOpen: false,
      height: '0px'
    }
  },
  methods: {
    toggle() {
      this.isOpen = !this.isOpen
      if (this.isOpen) {
        this.height = `${this.$refs.content.scrollHeight}px`
      } else {
        this.height = '0px'
      }
    }
  }
}
</script>

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

使用 CSS Grid 实现 SlideUp

CSS Grid 的 grid-template-rows 属性可以实现平滑的高度过渡效果。

<template>
  <button @click="isOpen = !isOpen">Toggle Grid Slide</button>
  <div class="grid-container" :class="{ 'is-open': isOpen }">
    <div class="grid-content">Content inside CSS Grid</div>
  </div>
</template>

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

<style>
.grid-container {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s ease;
}

.grid-container.is-open {
  grid-template-rows: 1fr;
}

.grid-content {
  overflow: hidden;
}
</style>