当前位置：首页 > VUE

vue 实现滑动效果

2026-01-17 16:08:44VUE

Vue 实现滑动效果的方法

使用 CSS Transition

通过 Vue 的 v-if 或 v-show 结合 CSS Transition 实现滑动效果。定义一个 CSS 类，利用 transform 或 margin 属性实现平滑过渡。

<template>
  <div>
    <button @click="toggle">Toggle Slide</button>
    <transition name="slide">
      <div v-if="show" class="box">滑动内容</div>
    </transition>
  </div>
</template>

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

<style>
.slide-enter-active, .slide-leave-active {
  transition: all 0.5s ease;
}
.slide-enter, .slide-leave-to {
  transform: translateX(100%);
}
.box {
  width: 200px;
  height: 100px;
  background: #42b983;
}
</style>

使用 Vue Transition 的 JavaScript 钩子

通过 JavaScript 钩子（如 enter 和 leave）结合动画库（如 GSAP 或 Anime.js）实现更复杂的滑动效果。

<template>
  <div>
    <button @click="toggle">Toggle Slide</button>
    <transition
      @enter="enter"
      @leave="leave"
      :css="false"
    >
      <div v-if="show" class="box">滑动内容</div>
    </transition>
  </div>
</template>

<script>
import gsap from 'gsap';
export default {
  data() {
    return {
      show: false
    };
  },
  methods: {
    toggle() {
      this.show = !this.show;
    },
    enter(el, done) {
      gsap.from(el, {
        x: 100,
        opacity: 0,
        duration: 0.5,
        onComplete: done
      });
    },
    leave(el, done) {
      gsap.to(el, {
        x: 100,
        opacity: 0,
        duration: 0.5,
        onComplete: done
      });
    }
  }
};
</script>

使用第三方库（如 Swiper.js）

对于轮播或复杂滑动效果，可以直接集成 Swiper.js 等库。

<template>
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide">Slide 1</div>
      <div class="swiper-slide">Slide 2</div>
      <div class="swiper-slide">Slide 3</div>
    </div>
  </div>
</template>

<script>
import Swiper from 'swiper';
import 'swiper/swiper-bundle.css';
export default {
  mounted() {
    new Swiper('.swiper-container', {
      loop: true,
      autoplay: {
        delay: 3000,
      },
    });
  }
};
</script>

使用 Vue 的 `<transition-group>`

对于列表项的滑动效果，可以使用 <transition-group> 实现多个元素的动画。

<template>
  <div>
    <button @click="addItem">Add Item</button>
    <button @click="removeItem">Remove Item</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],
      nextNum: 4
    };
  },
  methods: {
    addItem() {
      this.items.push(this.nextNum++);
    },
    removeItem() {
      this.items.pop();
    }
  }
};
</script>

<style>
.list-item {
  display: inline-block;
  margin-right: 10px;
}
.list-enter-active, .list-leave-active {
  transition: all 1s;
}
.list-enter, .list-leave-to {
  opacity: 0;
  transform: translateY(30px);
}
</style>

以上方法可根据需求选择，CSS Transition 适合简单滑动，JavaScript 钩子适合复杂动画，Swiper.js 适合轮播，<transition-group> 适合列表动画。

vue 实现滑动效果