Animating each individual element within the v-for loop in Vue.JS

Question

Animating each individual element within the v-for loop in Vue.JS

Recently, I developed a basic to-do app using VueJS. Additionally, I integrated vue2-animate, which is a Vue.js 2.0 adaptation of Animate.css used for Vue's built-in transitions. The animation feature that adds an element functions correctly.

However, there are two issues that need addressing without unnecessary coding:

The animation display for the list fetched from local storage currently runs simultaneously for all items. I require the animation to run sequentially for each item individually.
There is a problem with the deletion animation - it always removes the last item first, followed by a shift in the sequence.

P.S.: To see the demo, refer to JSFiddle since local storage does not function in SO snippets.

Vue.component("adder", {
  data: function() {
    return {
      task: ""
    };
  },
  template: `
    <div class="input-group mb-3">
    <input type="text" class="form-control" placeholder="New task..." aria-label="New task..." aria-describedby="" v-model="task" v-on:keyup.enter="add">
    <div class="input-group-append">
      <button class="btn btn-primary" id="" v-on:click="add" >+</button>
    </div>
    </div>
    `,
  methods: {
    add: function() {
      this.$emit("addtodo", {
        title: this.task,
        done: false
      });
      this.task = "";
    }
  }
});

Vue.component("todo", {
  props: ["item"],
  template: `

    <a href="#" class="list-group-item list-group-item-action task" v-bind:class="{'disabled done' : item.done==true}">
    <label class="form-check-label">
            <input class="form-check-input" type="checkbox" name="" id="" value="checkedValue"  v-model="item.done"> {{item.title}}
        </label>
        <button type="button" class="close" aria-label="Close" v-on:click="del">
            <span aria-hidden="true">&times;</span>
        </button>
    </a>
    
    `,
  methods: {
    del: function() {
      this.$emit("deletetodo");
    }
  }
});

Vue.component("todos", {
  props: ["items"],
  template: `
    <div class="list-group">
        <transition-group name="bounceLeft" tag="a">
            <todo v-for="(item, index) in items" :key="index" :item.sync="item" v-on:deletetodo="delTodo(item)"></todo>
        </transition-group>
    </div>
    `,
  methods: {
    delTodo: function(i) {
      this.$emit("deletetodo", i);
    }
  }
});
Vue.config.devtools = true;

let app = new Vue({
  el: ".todoapp",
  data: {
    title: "To-Do App",
    items: []
  },
  methods: {
    addTodo: function(e) {
      this.items.push(e);
    },
    delTodo: function(i) {
      this.items = this.items.filter(e => e != i);
    }
  },
  mounted() {
    if (localStorage.items) {
      this.items = JSON.parse(localStorage.getItem("items"));
    }
  },
  watch: {
    items: {
      handler(val) {
        localStorage.setItem("items", JSON.stringify(this.items));
      },
      deep: true
    }
  }
});

.done>label {
  text-decoration: line-through;
}

.task {
  padding-left: 36px;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <title>To-Do App</title>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous" />

  <link rel="stylesheet" href="https://unpkg.com/vue2-animate/dist/vue2-animate.min.css" />
  <link rel="stylesheet" href="style.css" />
</head>

<body>
  <div class="container todoapp">
    <div class="row">
      <br />
    </div>
    <div class="card">
      <div class="card-header">
        {{ title }}
      </div>
      <div class="card-body">
        <adder v-on:addtodo="addTodo"></adder>
        <todos :items.sync="items" v-on:deletetodo="delTodo"></todos>
      </div>
    </div>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue"></script>
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
  <script src="script.js"></script>
</body>

</html>

Check out the JSFiddle demo here

javascript animation vue.js

Answer 1

Answer №1

Let's tackle this step by step:

Removing a task

The reason why it always appears that the last task is being deleted is because you are using the index as the key for your list items. When you replace the entire items array in your delTodo method, a new array with new keys for each item is generated. If you key by item, then you will get the intended result:

<todo v-for="(item, index) in items" :key="item" :item.sync="item" v-on:deletetodo="delTodo(item)"></todo>

Displaying tasks one at a time upon loading

I suggest handling the showing/hiding of tasks with a computed property:

computed: {
    tasks: function(){
        return this.items.filter(item => item.isVisible);
    }
}

This approach involves toggling the value of isVisible on each task for show/hide functionality.

For example, when initially loading tasks from local storage, you could set all tasks to isVisible: false. Then, utilize a setTimeout within a for loop to display them one by one:

mounted() {
    // Retrieve items and initialize all as hidden
    if (localStorage.items) {
        this.items = JSON.parse(localStorage.getItem("items"))
                     .map(item => item.isVisible = false);
    }

    // Iterate through to reveal the tasks
    for(let i=1; i<=this.items.length; i++){
        // Define 300 milliseconds delay
        let delay = i * 300;

        setTimeout(function(){
            this.items[i].isVisible = true;
        }.bind(this), delay);
    }
},

Answer 2

Let's tackle this step by step:

Removing a task

The reason why it always appears that the last task is being deleted is because you are using the index as the key for your list items. When you replace the entire items array in your delTodo method, a new array with new keys for each item is generated. If you key by item, then you will get the intended result:

<todo v-for="(item, index) in items" :key="item" :item.sync="item" v-on:deletetodo="delTodo(item)"></todo>

Displaying tasks one at a time upon loading

I suggest handling the showing/hiding of tasks with a computed property:

computed: {
    tasks: function(){
        return this.items.filter(item => item.isVisible);
    }
}

This approach involves toggling the value of isVisible on each task for show/hide functionality.

For example, when initially loading tasks from local storage, you could set all tasks to isVisible: false. Then, utilize a setTimeout within a for loop to display them one by one:

mounted() {
    // Retrieve items and initialize all as hidden
    if (localStorage.items) {
        this.items = JSON.parse(localStorage.getItem("items"))
                     .map(item => item.isVisible = false);
    }

    // Iterate through to reveal the tasks
    for(let i=1; i<=this.items.length; i++){
        // Define 300 milliseconds delay
        let delay = i * 300;

        setTimeout(function(){
            this.items[i].isVisible = true;
        }.bind(this), delay);
    }
},

Answer 3

Answer №2

One great success we experienced was the phased addition of items to the array:

  mounted() {
    let items = [];
    if (localStorage.items) {
      items = JSON.parse(localStorage.getItem("items"))
    }
    for (let i = 0; i < items.length; i++) {
      let delay = i * 1000;
      setTimeout(
        function() {
          this.items.push(items[i])
        }.bind(this),
        delay
      )
    }
  }

Answer 4

One great success we experienced was the phased addition of items to the array:

  mounted() {
    let items = [];
    if (localStorage.items) {
      items = JSON.parse(localStorage.getItem("items"))
    }
    for (let i = 0; i < items.length; i++) {
      let delay = i * 1000;
      setTimeout(
        function() {
          this.items.push(items[i])
        }.bind(this),
        delay
      )
    }
  }

Answer 5

Answer №3

Adding onto the discussion, here is a method to achieve staggering within a Vuex Action and utilizing fat arrow syntax:

async fetchRepositories( {commit} ){
  const response = await gitHubApi.get<Repository[]>('/users/rodolphocastro/repos') // Using Axios to call API
  const staggered: Repository[] = []
  response.data.forEach((r, i) => {
    const delay = i * 300 // 300ms -> Time interval for each item in the array
    setTimeout(() => {
      staggered.push(r)
      commit('setRepositories', staggered)
    }, delay)
  })
}

Answer 6

Adding onto the discussion, here is a method to achieve staggering within a Vuex Action and utilizing fat arrow syntax:

async fetchRepositories( {commit} ){
  const response = await gitHubApi.get<Repository[]>('/users/rodolphocastro/repos') // Using Axios to call API
  const staggered: Repository[] = []
  response.data.forEach((r, i) => {
    const delay = i * 300 // 300ms -> Time interval for each item in the array
    setTimeout(() => {
      staggered.push(r)
      commit('setRepositories', staggered)
    }, delay)
  })
}

Animating each individual element within the v-for loop in Vue.JS

Answer №1

Removing a task

Displaying tasks one at a time upon loading

Answer №2

Answer №3

Similar questions

What is the best way to showcase the information of each object on a click event in Vue.js?

Issue with Kendo dropdown's optionLabel functionality malfunctioning

Could using 'require' in node.js lead to a memory leak issue?

Display user information from another component using Vue's dynamic routing feature

Errors encountered by the Chrome extension

Methods to troubleshoot problem of angular component loading issue in firefox with ViewEncapsulation.Native

What is causing the backslash character to be removed from my ajax request?

Managing Server Crashes in Node.js

Displaying success and failure messages on a modal window using Ajax in PHP form

The process of building a Vue application encountered an error when attempting to run the command "npm run build"

Encountered an error when attempting to use 'appendChild' on 'Node': the first parameter is not the correct type. It was able to work with some elements, but not with others

Nodemailer fails to send out emails despite the absence of any error messages

Organizing DIVs upon website initialization

Is the branch of ExtJS 4.1 TreeStore lazy loading extending?

A large canvas displaying a single optimized image

I am experiencing an issue where the jquery sleep function is not being executed during

Validation of input using JQuery

Tips for removing a row without impacting the rest of the rows

Enhanced hierarchical organization of trees

Changing the color of a div while implementing a show and hide effect in JavaScript