javascript - VueJS如何观察一个值并在它改变时进行动画处理

Question

在我的vuejs应用程序中，我想在数字/值更改时对其进行动画处理。该值基于来自vuex-store 的响应。

所以我已经让动画运行了，但由于某种原因，动画循环是无限的，并且一直在继续。

data() {
  return {
     interval: false,
     hitsCount: 0
  }
},

watch: {
    hitsCount: function() {
       clearInterval(this.interval);

       this.interval = window.setInterval( function() {
            let change = this.hitsCount / 10;

            change = change >= 0 ? Math.ceil(change) : Math.floor(change);

            this.hitsCount = this.hitsCount + change;
        }.bind(this),20);
    }
}

模板很简单：

<div> {{hitsCount}} </div>

该值hitsCount来自一个请求：

this.$store.dispatch("store/data", {}).then(response => {
    this.hitsCount = response.total;
    .../
});

每次有新请求时，该值都会更改。

如前所述，动画立即开始并不断计数 - 我在这里错过了什么？

标签： javascriptvue.jsvuejs2

Answer 1

无论如何，观察你正在改变的财产并不是一个好主意。把它分成两个变量。

data() {
  return {
    hitsCount: 0,
    hitsCountDisplay: 0
  }
},

watch: {
  hitsCount() {
    clearInterval(this.interval);

    if (this.hitsCount !== this.hitsCountDisplay) {
      let value = this.hitsCountDisplay;
      const change = (this.hitsCount - this.hitsCountDisplay) / 30;
      this.interval = setInterval(() => {
        value += change;
        this.hitsCountDisplay = Math.round(value);
        if (this.hitsCountDisplay === this.hitsCount) {
          clearInterval(this.interval);
        }
      }, 20);
    }          
  }
}

和

<div> {{hitsCountDisplay}} </div>

这是一个工作示例：https ://jsfiddle.net/knvyrx8j/