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

Calculating Time Difference in JavaScript Without Utilizing moment.js Library

The ajax function does not provide a response

Textbox value disappears after being updated

Strings that automatically adjust to fit the content from a JSON object

Unable to extract all advertisements from Facebook Marketplace

Function that observes with the pipe syntax

Encountering a registration error persistently: [TypeError: Network request failed]

What is the best approach to dynamically implement useReducer in code?

The failure of a unit test involving Jest and try-catch

What are the different ways to share data between components in React?

Ways to transfer information from a function within one element to another element

Internet Explorer automatically moves the cursor to the beginning of a textarea when it gains

Creating a Triangle Slider Component with React and Material-UI (MUI)

Is there a way to prevent an iframe from being recorded in Chrome's browsing history?

Exploring the world of JMeter: capturing sessions with JavaScript and jQuery

Ways to bypass mongoose schema validation while making an update request in the API

Get the Zip file content using PushStreamContent JavaScript

The dynamic routing feature in React fails to function properly after the application is built or deployed

Angular Oops! We ran into a small hiccup: [$injector:modulerr]

Why is the image cut in half on mobile devices but displaying correctly on computer screens? Could it be an issue with