当前位置：首页 > VUE

vue实现slideup效果例子

2026-02-23 17:18:15VUE

Vue 实现 SlideUp 效果示例

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

使用 CSS Transition 和 Vue 的 v-if/v-show

通过 Vue 的 v-if 或 v-show 控制元素显示隐藏，结合 CSS 过渡实现滑动效果。

<template>
  <div>
    <button @click="toggle">Toggle Slide</button>
    <transition name="slide">
      <div v-if="isVisible" class="content">
        This content will slide up and down
      </div>
    </transition>
  </div>
</template>

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

<style>
.slide-enter-active, .slide-leave-active {
  transition: all 0.5s ease;
}
.slide-enter, .slide-leave-to {
  transform: translateY(100%);
  opacity: 0;
}
.content {
  height: 100px;
  background: lightblue;
  margin-top: 10px;
}
</style>

使用 Vue Transition 的 JavaScript 钩子

通过 JavaScript 钩子实现更复杂的动画控制。

<template>
  <div>
    <button @click="toggle">Toggle Slide</button>
    <transition
      @before-enter="beforeEnter"
      @enter="enter"
      @leave="leave"
      :css="false"
    >
      <div v-if="isVisible" class="content">
        JavaScript hook controlled animation
      </div>
    </transition>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isVisible: false
    }
  },
  methods: {
    toggle() {
      this.isVisible = !this.isVisible
    },
    beforeEnter(el) {
      el.style.transform = 'translateY(100%)'
      el.style.opacity = '0'
    },
    enter(el, done) {
      const animation = el.animate([
        { transform: 'translateY(100%)', opacity: 0 },
        { transform: 'translateY(0)', opacity: 1 }
      ], {
        duration: 500
      })
      animation.onfinish = done
    },
    leave(el, done) {
      const animation = el.animate([
        { transform: 'translateY(0)', opacity: 1 },
        { transform: 'translateY(100%)', opacity: 0 }
      ], {
        duration: 500
      })
      animation.onfinish = done
    }
  }
}
</script>

使用第三方动画库（如 Animate.css）

结合 Animate.css 可以快速实现各种预定义动画效果。

<template>
  <div>
    <button @click="toggle">Toggle Slide</button>
    <transition
      enter-active-class="animate__animated animate__slideInUp"
      leave-active-class="animate__animated animate__slideOutDown"
    >
      <div v-if="isVisible" class="content">
        Content with Animate.css
      </div>
    </transition>
  </div>
</template>

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

使用 GSAP 实现高级动画

GSAP 提供了更强大的动画控制能力。

<template>
  <div>
    <button @click="toggle">Toggle Slide</button>
    <transition @enter="enter" @leave="leave" :css="false">
      <div v-if="isVisible" class="content">
        GSAP powered animation
      </div>
    </transition>
  </div>
</template>

<script>
import gsap from 'gsap'
export default {
  data() {
    return {
      isVisible: false
    }
  },
  methods: {
    toggle() {
      this.isVisible = !this.isVisible
    },
    enter(el, done) {
      gsap.from(el, {
        y: '100%',
        opacity: 0,
        duration: 0.5,
        onComplete: done
      })
    },
    leave(el, done) {
      gsap.to(el, {
        y: '100%',
        opacity: 0,
        duration: 0.5,
        onComplete: done
      })
    }
  }
}
</script>