javascript - 向水平滑动导航栏添加过渡动画

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++;
  }
}

标签： javascripthtmlcssvue.jscss-transitions