当前位置：首页 > VUE

vue实现页面滑入

2026-03-10 02:59:10VUE

使用 CSS 过渡实现滑入效果

通过 Vue 的 transition 组件结合 CSS 过渡实现滑入动画。在模板中包裹需要滑入的元素，并定义 CSS 过渡类名。

<template>
  <transition name="slide">
    <div v-if="show" class="content">滑入内容</div>
  </transition>
</template>

<style>
.slide-enter-active, .slide-leave-active {
  transition: all 0.5s ease;
}
.slide-enter-from {
  transform: translateX(100%);
}
.slide-enter-to {
  transform: translateX(0);
}
</style>

使用 CSS 动画实现滑入

通过 @keyframes 定义滑入动画，并在 Vue 的 transition 组件中应用。

<template>
  <transition name="slide-animation">
    <div v-if="show" class="content">滑入内容</div>
  </transition>
</template>

<style>
@keyframes slideIn {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}
.slide-animation-enter-active {
  animation: slideIn 0.5s ease;
}
</style>

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

引入 Animate.css 库，直接应用预定义的滑入动画类名。

<template>
  <transition
    enter-active-class="animate__animated animate__slideInRight"
    leave-active-class="animate__animated animate__slideOutLeft"
  >
    <div v-if="show" class="content">滑入内容</div>
  </transition>
</template>

<!-- 在项目中引入 Animate.css -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>

使用 JavaScript 钩子自定义动画

通过 Vue 的 transition 组件提供的 JavaScript 钩子（如 @before-enter、@enter）实现更复杂的滑入逻辑。

<template>
  <transition
    @before-enter="beforeEnter"
    @enter="enter"
    :css="false"
  >
    <div v-if="show" class="content">滑入内容</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: 500 }
      );
      animation.onfinish = done;
    }
  }
};
</script>

结合路由实现页面切换滑入

在 Vue Router 中使用 transition 实现页面路由切换时的滑入效果。

vue实现页面滑入

<template>
  <router-view v-slot="{ Component }">
    <transition name="slide">
      <component :is="Component" />
    </transition>
  </router-view>
</template>

<style>
.slide-enter-active, .slide-leave-active {
  transition: all 0.5s ease;
}
.slide-enter-from {
  transform: translateX(100%);
}
.slide-leave-to {
  transform: translateX(-100%);
}
</style>