How to use VueJS to detect changes in a value and trigger animations

Question

How to use VueJS to detect changes in a value and trigger animations

Within my Vue.js application, I am looking to incorporate animations for a number/value that changes dynamically based on data retrieved from the Vuex store.

Although I have managed to initiate the animation successfully, I am encountering an issue where the animation loop appears to be infinite and continues endlessly.

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

The corresponding template structure is as follows:

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

The value of hitsCount is sourced from an API request:

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

As each new request is made, the value dynamically updates. Despite these adjustments, the animation cycle persists infinitely. What could potentially be causing this issue?

javascript vue.js vuejs2

Answer 1

Answer №1

If you're changing a property, it's best not to keep an eye on it constantly. Instead, split it into two separate variables.

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

Also, update your HTML code to reflect the changes:

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

You can view a working example of this implementation here: https://jsfiddle.net/knvyrx8j/

Answer 2

If you're changing a property, it's best not to keep an eye on it constantly. Instead, split it into two separate variables.

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

Also, update your HTML code to reflect the changes:

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

You can view a working example of this implementation here: https://jsfiddle.net/knvyrx8j/

Answer 3

Answer №2

Avoid updating a property within its watcher as it may lead to an endless loop. Instead, consider triggering the animation within the callback function of your action dispatcher:

this.$store.dispatch("store/data", {}).then(response => {
    let totalItems = response.total;
    clearInterval(this.interval);

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

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

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

Answer 4

Avoid updating a property within its watcher as it may lead to an endless loop. Instead, consider triggering the animation within the callback function of your action dispatcher:

this.$store.dispatch("store/data", {}).then(response => {
    let totalItems = response.total;
    clearInterval(this.interval);

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

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

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

How to use VueJS to detect changes in a value and trigger animations

Answer №1

Answer №2

Similar questions

How can TypeScript objects be serialized?

Delving into the World of ES6 Symbols

Determine the presence of a JSON Value/Array in a web application using JavaScript and visualize the information in a dynamic

Displaying a mouse cursor using an A-frame function

What is causing the failure of success function commands to be executed?

managing, modifying and removing information within the app.controller in AngularJS

How can I make the first option in a dropdown menu automatically selected in a select input form?

Erase a set of characters with the press of the backspace key (JavaScript)

Navigating the process of transferring a function to a functional component within React

Javascript on-page scroll positioning

Node server optimization for images

What steps should I take to repair this array table?

Invoking servlet using Ajax

Leveraging ES6 modules within JavaScript for exporting uncomplicated variables

Is using Javascript objects a better alternative to Redux?

Scroll horizontally through the number field in Chrome

Collaborating on validating inputs and modules for both backend and frontend

Retrieving the ID of the dragged item and its list in Vue.draggable

Retrieving the headers from an ajax request

Shuffle the contents of various div elements, conceal one, reveal another