当前位置：首页 > VUE

vue实现拉幕

2026-03-08 21:32:00VUE

Vue 实现拉幕效果的方法

拉幕效果通常指从屏幕一侧滑入或滑出的动画，常见于侧边栏、弹窗等场景。以下是几种实现方式：

使用 CSS Transition 和 Vue 数据绑定

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

<template>
  <div>
    <button @click="toggle">切换拉幕</button>
    <div class="curtain" :class="{ 'active': isOpen }"></div>
  </div>
</template>

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

<style>
.curtain {
  position: fixed;
  top: 0;
  left: -300px; /* 初始隐藏 */
  width: 300px;
  height: 100vh;
  background: #333;
  transition: left 0.3s ease;
}
.curtain.active {
  left: 0; /* 滑出 */
}
</style>

使用 Vue Transition 组件

Vue 内置的 <transition> 组件可以更灵活地定义动画：

<template>
  <div>
    <button @click="toggle">切换拉幕</button>
    <transition name="slide">
      <div class="curtain" v-if="isOpen"></div>
    </transition>
  </div>
</template>

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

结合第三方动画库（如 Animate.css）

通过 animate.css 快速实现复杂动画效果：

<template>
  <div>
    <button @click="toggle">切换拉幕</button>
    <transition
      enter-active-class="animate__animated animate__slideInLeft"
      leave-active-class="animate__animated animate__slideOutLeft"
    >
      <div class="curtain" v-if="isOpen"></div>
    </transition>
  </div>
</template>

<script>
import 'animate.css';
export default {
  data() {
    return {
      isOpen: false
    };
  }
};
</script>

使用 JavaScript 钩子自定义动画

通过 Vue Transition 的 JavaScript 钩子实现更复杂的逻辑：

vue实现拉幕

<template>
  <transition
    @before-enter="beforeEnter"
    @enter="enter"
    @leave="leave"
  >
    <div class="curtain" v-if="isOpen"></div>
  </transition>
</template>

<script>
export default {
  methods: {
    beforeEnter(el) {
      el.style.transform = 'translateX(-100%)';
    },
    enter(el, done) {
      const animation = el.animate(
        [{ transform: 'translateX(-100%)' }, { transform: 'translateX(0)' }],
        { duration: 300 }
      );
      animation.onfinish = done;
    },
    leave(el, done) {
      const animation = el.animate(
        [{ transform: 'translateX(0)' }, { transform: 'translateX(-100%)' }],
        { duration: 300 }
      );
      animation.onfinish = done;
    }
  }
};
</script>