当前位置：首页 > VUE

vue实现页面滑入

2026-02-18 13:42:06VUE

Vue 实现页面滑入效果

使用 CSS 过渡和 Vue 的 `<transition>` 组件

在 Vue 中，可以利用 <transition> 组件结合 CSS 过渡实现页面滑入效果。以下是一个简单的实现方式：

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

<script>
export default {
  data() {
    return {
      show: false
    }
  },
  mounted() {
    this.show = true
  }
}
</script>

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

使用 Animate.css 库

Animate.css 提供了丰富的动画效果，可以方便地实现滑入效果：

vue实现页面滑入

<template>
  <div class="animated slideInRight">
    这是滑入的内容
  </div>
</template>

<script>
import 'animate.css'
export default {
  // 组件逻辑
}
</script>

使用 JavaScript 钩子实现更复杂动画

对于需要更精细控制的动画，可以使用 Vue 的 JavaScript 钩子：

vue实现页面滑入

<template>
  <transition
    @before-enter="beforeEnter"
    @enter="enter"
    @after-enter="afterEnter"
  >
    <div v-if="show" class="box">
      滑动内容
    </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
    },
    afterEnter(el) {
      el.style.transform = ''
    }
  }
}
</script>

使用第三方动画库（如 GSAP）

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

<template>
  <transition
    @enter="enter"
    @leave="leave"
    :css="false"
  >
    <div v-if="show" class="animated-element">
      滑动内容
    </div>
  </transition>
</template>

<script>
import gsap from 'gsap'
export default {
  methods: {
    enter(el, done) {
      gsap.from(el, {
        x: '100%',
        duration: 0.5,
        onComplete: done
      })
    },
    leave(el, done) {
      gsap.to(el, {
        x: '100%',
        duration: 0.5,
        onComplete: done
      })
    }
  }
}
</script>

页面路由过渡效果

在 Vue Router 中实现页面切换时的滑入效果：

// router.js
const router = new VueRouter({
  routes: [...]
})

// App.vue
<template>
  <transition name="slide">
    <router-view></router-view>
  </transition>
</template>

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