Question

请看一下我的代码，我为data中的变量分配了一个新值，并且var width具有值100。此后，当动画结束时，我尝试将值返回为var width 100，然后再次启动动画，但是Vue不会分配新值100并保持为0。但是如果我将使用setTimeout进行此操作，则它的工作效果非常好。为什么在nextTick中没有发生这种情况？

链接到jsfiddle

new Vue({
  el: '#app',
  data: {
        width: 100,
    time: 0
  },
  mounted() {
    setTimeout(() => {
        this.time = 5000;
        this.width = 0;

      setTimeout(() => {
        this.rerenderBar();
      }, 5100)

    }, 1000)

  },
  methods: {
      rerenderBar() {
        this.time = 0;
        this.width = 100;

      /* this.$nextTick(() => {
        this.time = 5000;
              this.width = 0;
      }) */

      setTimeout(() => {
        this.time = 5000;
        this.width = 0;
      }, 1500)
    }
  }
})


<div id="app">
      <div class="progress-bar-wrap">
        <div class="progress-bar" :style="{
              'width': width + '%',
              'transition-duration': `${time}ms`
            }"></div>    
      </div>
    </div>

Answer 1

我的猜测是，由于$nextTick在Vue's DOM update cycle之后运行，并且您的动画由css过渡直接在元素上（不受Vue处理）提供动力，因此$nextTick会在调用{ {1}} 它不等待动画完成。

如果您需要等待动画结束，可以使用Vue Transitions进行调查，并在动画结束时使用Javascript Hooks重置条的宽度。

在nextTick组件中不重绘

1 个答案: