当前位置：首页 > VUE

vue实现位置的过渡

2026-02-09 16:54:29VUE

Vue 实现位置过渡的方法

Vue 提供了 <transition> 和 <transition-group> 组件来实现元素的过渡效果，包括位置变化。以下是几种常见的实现方式：

使用 CSS 过渡

通过 Vue 的 <transition> 组件结合 CSS 的 transition 属性，可以实现平滑的位置变化效果。

<template>
  <div>
    <button @click="togglePosition">切换位置</button>
    <transition name="slide">
      <div v-if="show" class="box"></div>
    </transition>
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: true
    }
  },
  methods: {
    togglePosition() {
      this.show = !this.show
    }
  }
}
</script>

<style>
.box {
  width: 100px;
  height: 100px;
  background: #42b983;
  margin-top: 10px;
}

.slide-enter-active, .slide-leave-active {
  transition: all 0.5s ease;
}

.slide-enter, .slide-leave-to {
  opacity: 0;
  transform: translateY(20px);
}
</style>

使用 JavaScript 钩子

通过 JavaScript 钩子可以更灵活地控制过渡效果，例如结合 GSAP 实现复杂的动画。

<template>
  <div>
    <button @click="togglePosition">切换位置</button>
    <transition
      @before-enter="beforeEnter"
      @enter="enter"
      @leave="leave"
    >
      <div v-if="show" class="box"></div>
    </transition>
  </div>
</template>

<script>
import gsap from 'gsap'

export default {
  data() {
    return {
      show: true
    }
  },
  methods: {
    togglePosition() {
      this.show = !this.show
    },
    beforeEnter(el) {
      el.style.opacity = 0
      el.style.transform = 'translateY(20px)'
    },
    enter(el, done) {
      gsap.to(el, {
        opacity: 1,
        y: 0,
        duration: 0.5,
        onComplete: done
      })
    },
    leave(el, done) {
      gsap.to(el, {
        opacity: 0,
        y: 20,
        duration: 0.5,
        onComplete: done
      })
    }
  }
}
</script>

<style>
.box {
  width: 100px;
  height: 100px;
  background: #42b983;
  margin-top: 10px;
}
</style>

使用 `<transition-group>` 实现列表位置过渡

<transition-group> 适用于列表元素的动态变化，例如排序或过滤。

<template>
  <div>
    <button @click="shuffle">随机排序</button>
    <transition-group name="list" tag="ul">
      <li v-for="item in items" :key="item" class="list-item">
        {{ item }}
      </li>
    </transition-group>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [1, 2, 3, 4, 5]
    }
  },
  methods: {
    shuffle() {
      this.items = [...this.items].sort(() => Math.random() - 0.5)
    }
  }
}
</script>

<style>
.list-item {
  display: inline-block;
  margin-right: 10px;
  padding: 5px 10px;
  background: #42b983;
  color: white;
}

.list-enter-active, .list-leave-active {
  transition: all 0.5s ease;
}

.list-enter, .list-leave-to {
  opacity: 0;
  transform: translateY(20px);
}

.list-move {
  transition: transform 0.5s;
}
</style>

结合 Vue Router 实现页面过渡

Vue Router 可以与 <transition> 组件结合，实现页面切换时的过渡效果。

<template>
  <div id="app">
    <router-view v-slot="{ Component }">
      <transition name="fade" mode="out-in">
        <component :is="Component" />
      </transition>
    </router-view>
  </div>
</template>

<style>
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.5s ease;
}

.fade-enter, .fade-leave-to {
  opacity: 0;
}
</style>