将过渡动画添加到水平滑动导航栏

Question

我有一个带有按钮列表的导航栏。单击右箭头按钮后，我的列表将索引向右移动。这是默认情况下导航栏的外观：

这就是你点击右边的箭头按钮后的样子： 目前，过渡是即时的。我想让过渡看起来像一个滑动效果，让用户感觉按钮平滑地向左滑动。我该怎么做？

这是我的导航栏：

<template>
    <nav class="navbar navbar-expand-sm navbar-light">
      <form
        class="form-inline"
        v-for="(genre, index) in genres.slice(one, twenty)"
        :key="index"
      >
        <button class="btn btn-outline-dark m-1" type="button">
          {{ genre }}
        </button>
      </form>
      <a class="pashmi" @click="loadLeft">
        <img src="~/assets/Arrow-Scroll.svg" />
      </a>
    </nav>
</template>

<style scoped>
  .pashmi {
    position: absolute;
    right: 15px;
  }
</style>

这是我的流派列表和 one 和 twenty 变量：

data() {
    return {
      one: 0,
      twenty: 19,
      genres: [
        "ONE",
        "TWO",
        // goes until FOURTY
      ]
    }
}

并使用此方法将索引向右移动：

methods: {
  loadLeft() {
    this.one++;
    this.twenty++;
  }
}