VUE Strange behavior of transition-group animation? [closed]

Question

If you hold down the arrows on the input, then the animation begins to behave strangely, why? and how to fix it. https://codesandbox.io/s/exciting-jang-rgz6zx?file=/src/components/HelloWorld.vue

Answer 1

Try something like that :

<template>
  <div>
    <input step="500" min="0" type="number" v-model="search" />
    <transition-group name="list">
      <div v-for="item in items" :key="item">
        <div v-if="item > searchThrottle">
          {{ item }}
        </div>
      </div>
    </transition-group>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        1050,
        1060,
        2000,
        3000,
        4000,
        5000,
        10000,
        12000,
        20000,
        25000,
        30000,
        35000,
        40000,
        50230,
        101223,
        4342350,
        52342534,
      ],
      searchThrottle: "",
      search: "",
    };
  },
  name: "HelloWorld",
  props: {
    msg: String,
  },
  mounted() {
      this.searchThrottle = this.search;
      setInterval(() => {
          this.searchThrottle = this.search;
      }, 500)
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
.list-move {
  transition: transform 1s;
}
</style>

you will have way more fps like that because it only update the value every 500ms