Why does the transitions-group animation work on an element with the wrong index?

Question

Vue.js

If you click on the close button of the message, for example ONE, then you can see how it instantly collapses, and the delete animation plays on the last element - https://codesandbox.io/s/y739ry1v39
Why is this happening and how to fix it?

Answer 1

The cant is exactly the same as in your previous question . Make a normal key instead of an index - and everything will be fine. And now what - the element has been removed, no matter which one, the key of the last element always changes (or rather, there is no element with such a key at all) - that's why it is animated.