A brief discussion on v-for in Vue, key value affects transition effect and animation effect (detailed code explanation)

In the previous article "Teach you how to use Vue to achieve animation effects (with code)", I introduced how to use Vue to achieve animation effects. The following article will give you a brief introduction to the impact of key values ​​​​in Vue on transition effects and animation effects. Friends in need can refer to it. I hope it will be helpful to you.

About Vue.jsv-for,key The order change affects the performance of the transition animation

About Vue.jsv-for, the value of key affects the transition This problem with animation performance occurs when writing the Message component. Let’s look at the code part first.

Child component:

<!-- Notice： -->
<transition :name="transitionName" @enter="enter" @leave="leave">
  ...... ..
</transition>
<!-- JS: -->
<script>
  export default {
    methods: {
      enter(e) {
        e.style.height = e.scrollHeight + "px";
      },
      leave(e) {
        e.style.height = 0;
      },
    },
  };
</script>
<!-- CSS: -->
<style>
  transition: all 0.2s ease-in-out;
</style>

Parent component:

<notice v-for="(item, index) in notices" :key="index">
  ......
</notice>

JS:

data() {
    return {
      notices: []
    };
  },
  //notices 新增的时候自动加入定时器来移除
  setTimeout(() => {
    let index = 0 //这里假设我已经取得了移除的 index索引, 可能不是依次的123456
    this.notices.splice(index, 1);
  }, time) //time 为传入的随机不等值

Theoretically when a child component is removed, it will have a smooth height from 1 to 0 to transition animation, but otherwise, the animation will only be applied to the last one each time when removed. I am puzzled, all kinds of js, css implementations are not very ideal. Still stuck one after another.

Go to the official website and read the document again. Found the problem. forWhen traversing, one value is very important: keyWhen the value of key is Number, every time the array is changed, dom will be re-rendered, so the animation will only affect the last one each time.

When the key value is String, each time the array is changed, dom defaults to the "in-place reuse" strategy

So when I change the key to String, I want the result to be executed smoothly and sequentially. An example of the perfect official website is https://cn.vuejs.org/v2/guide /list.html#key

It should be noted here that the value of key is String/Number, so the test In order to avoid non-duplication, the key value should be a random non-duplicate string/number, and do not use the default index.

[End]

Recommended learning: JavaScript video tutorial

The above is the detailed content of A brief discussion on v-for in Vue, key value affects transition effect and animation effect (detailed code explanation). For more information, please follow other related articles on the PHP Chinese website!