当前位置：首页 > VUE

vue实现拉幕

2026-02-17 09:12:03VUE

Vue 实现拉幕效果

拉幕效果通常指页面元素从一侧滑入或滑出的动画效果，可以通过Vue的过渡系统或CSS动画实现。以下是几种常见方法：

使用Vue过渡组件

Vue内置的<transition>组件可以轻松实现拉幕效果。定义一个CSS类控制元素的滑动动画：

<template>
  <button @click="show = !show">切换拉幕</button>
  <transition name="slide">
    <div v-if="show" class="curtain">拉幕内容</div>
  </transition>
</template>

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

<style>
.slide-enter-active, .slide-leave-active {
  transition: transform 0.5s ease;
}
.slide-enter, .slide-leave-to {
  transform: translateX(100%);
}
.curtain {
  position: fixed;
  top: 0;
  right: 0;
  width: 300px;
  height: 100vh;
  background: #333;
  color: white;
}
</style>

使用CSS动画

直接通过CSS定义关键帧动画，结合Vue的数据绑定控制动画触发：

<template>
  <div 
    class="curtain" 
    :class="{ 'slide-in': show, 'slide-out': !show }"
  >内容</div>
</template>

<style>
.curtain {
  position: fixed;
  width: 250px;
  height: 100%;
  right: -250px;
  transition: right 0.4s;
}
.slide-in {
  right: 0;
}
.slide-out {
  right: -250px;
}
</style>

结合VueUse库实现拖拽拉幕

使用@vueuse/core的useDraggable可以实现可拖拽的拉幕效果：

<template>
  <div 
    ref="target" 
    class="curtain" 
    :style="{ left: `${x}px` }"
  >拖拽我</div>
</template>

<script setup>
import { useDraggable } from '@vueuse/core'
const target = ref(null)
const { x } = useDraggable(target)
</script>

横向手风琴效果

多个面板的拉幕效果可以通过动态组件实现：

<template>
  <div class="accordion">
    <div 
      v-for="(item, i) in items" 
      :key="i" 
      class="panel" 
      @click="active = i"
      :class="{ active: active === i }"
    >{{ item }}</div>
  </div>
</template>

<style>
.accordion {
  display: flex;
}
.panel {
  width: 50px;
  transition: width 0.5s;
  overflow: hidden;
}
.panel.active {
  width: 200px;
}
</style>