当前位置：首页 > VUE

vue 实现滑动效果

2026-03-09 21:44:06VUE

vue 实现滑动效果的方法

在Vue中实现滑动效果可以通过多种方式，包括使用CSS动画、第三方库或原生JavaScript。以下是几种常见的方法：

使用CSS过渡和动画

通过Vue的过渡系统结合CSS可以实现简单的滑动效果。例如，通过v-if或v-show控制元素的显示隐藏，并添加过渡效果。

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

<script>
export default {
  data() {
    return {
      show: false
    }
  }
}
</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-smooth-slide）

对于更复杂的滑动效果，可以使用第三方库如vue-smooth-slide。

安装：

npm install vue-smooth-slide

使用：

<template>
  <div>
    <button @click="toggle">Toggle Slide</button>
    <smooth-slide :toggle="isOpen">
      <div class="box">滑动内容</div>
    </smooth-slide>
  </div>
</template>

<script>
import SmoothSlide from 'vue-smooth-slide'

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

<style>
.box {
  width: 200px;
  height: 100px;
  background: #42b983;
}
</style>

使用原生JavaScript实现滑动

如果需要更灵活的控制，可以直接使用JavaScript操作DOM元素的样式。

<template>
  <div>
    <button @click="slide">Slide</button>
    <div ref="slider" class="box">滑动内容</div>
  </div>
</template>

<script>
export default {
  methods: {
    slide() {
      const slider = this.$refs.slider
      slider.style.transition = 'transform 0.5s ease'
      slider.style.transform = 'translateX(100px)'
    }
  }
}
</script>

<style>
.box {
  width: 200px;
  height: 100px;
  background: #42b983;
}
</style>

使用Vue的`<transition-group>`实现列表滑动

对于列表项的滑动效果，可以使用<transition-group>。

vue 实现滑动效果

<template>
  <div>
    <button @click="addItem">Add 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++)
    }
  }
}
</script>

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

以上方法可以根据具体需求选择使用，CSS过渡适合简单的滑动效果，第三方库可以提供更丰富的功能，而原生JavaScript则适合需要高度自定义的场景。