动画分页问题列表

问题描述

如何为分页清单中的问题变化制作动画？ 我每页有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
    }
  },

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）