当前位置：首页 > VUE

vue实现页面滑入

2026-01-17 21:14:29VUE

使用 CSS 过渡实现滑入效果

在 Vue 中可以通过 CSS 过渡实现页面元素的滑入效果。定义一个过渡类，利用 Vue 的 <transition> 组件包裹目标元素，通过控制元素的 v-if 或 v-show 触发动画。

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

<style>
.slide-enter-active {
  transition: all 0.3s ease-out;
}
.slide-enter-from {
  transform: translateX(100px);
  opacity: 0;
}
</style>

结合动画库实现复杂滑入

使用第三方动画库如 Animate.css 可以快速实现丰富的滑入效果。先安装动画库，然后在 Vue 中直接调用预设的动画类名。

vue实现页面滑入

npm install animate.css

<template>
  <div class="animate__animated animate__slideInRight">滑入内容</div>
</template>

<script>
import 'animate.css'
</script>

动态控制滑入方向

通过动态绑定样式实现不同方向的滑入效果。利用 Vue 的计算属性或方法返回不同的变换样式，实现左右上下等方向的灵活控制。

vue实现页面滑入

<template>
  <div 
    :style="{ transform: `translateX(${direction === 'left' ? '-100%' : '100%'})` }"
    class="slide-content"
  ></div>
</template>

<script>
export default {
  data() {
    return {
      direction: 'left'
    }
  }
}
</script>

<style>
.slide-content {
  transition: transform 0.5s;
}
</style>

使用 GSAP 实现精细控制

对于需要精细时间轴控制的滑入动画，推荐使用 GSAP 动画库。通过 Vue 的生命周期钩子调用 GSAP 的动画方法，实现带缓动效果的滑入。

npm install gsap

<script>
import gsap from 'gsap'

export default {
  mounted() {
    gsap.from('.box', {
      x: 200,
      duration: 1,
      ease: "power2.out"
    })
  }
}
</script>

路由切换时的页面滑入

在 Vue Router 中可以通过路由守卫和过渡模式实现页面切换时的滑入效果。设置不同的过渡名称来区分前进和后退的动画方向。

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

<script>
export default {
  data() {
    return {
      transitionName: 'slide-left'
    }
  },
  watch: {
    '$route'(to, from) {
      this.transitionName = to.meta.index > from.meta.index ? 'slide-left' : 'slide-right'
    }
  }
}
</script>

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