动画分页问题列表

Question

如何为分页清单中的问题变化制作动画？ 我每页有1个问题，需要设置问题之间的过渡动​​画。 我正在使用Vue和Bootstrap-vue生成问题。 我的代码如下： 也可以在codepen上找到它： https://codepen.io/Yulya_Yu/pen/JjXMPxd

          <div v-for="question in filteredAnswers" :key="question.id" >
            {{question.name}}
            <b-form-radio-group
              :options="question.answers"
              stacked
              selected="selected"
              @input="getSelectedAnswer(question.answer.index)"
              :disabled="selected.length === subList.length && selected.indexOf(n) === -1"
            >{{question.answers}}</b-form-radio-group>
          </div>
        </div>
        <div class="survey-controls" v-if="!surveyFinished">
          <div class="pagination-btns">
            <button class="backwards" @click="onClickPreviousPage" :disabled="leftBtnDisabled">
            </button>
            <button class="forward" @click="onClickNextPage" :disabled="rightBtnDisabled">
            </button>
          </div>
          <button class="survey-finish-btn" @click="finishSurvey" :disabled="disableBtn">
            Завершить опрос
          </button>
        </div>

分页逻辑：

 created: function () {
    this.setAnswerPages()
  },
  mounted() {
  },
  methods: {
    setAnswerPages() {
      for (let i = 0; i < Math.ceil(this.questions.length / this.perPage); i++) {
        this.subList[i] = this.questions.slice(
          i * this.perPage,
          i * this.perPage + this.perPage
        )
      }
      this.leftBtnDisabled = this.currPage === 0
    },
    onClickPreviousPage() {
      if (this.currPage > 0) {
        this.currPage--
      }
    },
    onClickNextPage() {
      if (this.currPage < this.subList.length - 1) {
        this.currPage++
      }
    },
    finishSurvey() {
      this.surveyFinished = true
    },
  },
  computed: {
    filteredAnswers() {
      return this.subList[this.currPage]
    }
  },
  watch: {
    currPage() {
      if (this.currPage === this.subList.length - 1) {
        this.rightBtnDisabled = true
      } else if (this.currPage < this.subList.length - 1) {
        this.rightBtnDisabled = false
      }
      this.leftBtnDisabled = this.currPage === 0
    }
  },