滑块在Vue中工作，但我想做的是，如果你快速地按下按钮向前或向后，它会平滑地滚动

<template>
  <div class="slider-container">
    <div class="slider" :style="{ transform: `translateX(${position}px)` }"></div>
    <button @click="moveSlider(-100)">向前</button>
    <button @click="moveSlider(100)">向后</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      position: 0 // 初始位置
    };
  },
  methods: {
    moveSlider(distance) {
      this.position += distance;
    }
  }
};
</script>

<style>
.slider-container {
  width: 100%;
  overflow: hidden;
  position: relative;
}

.slider {
  width: 100%;
  height: 50px;
  background-color: blue;
  transition: transform 0.5s ease-in-out; /* 平滑过渡效果 */
}
</style>