Please explain more about the key of Vue's transition. What if there are more than 2 keys should be used?

Hey Kriz,

When dealing with lists, keys have to do with the way Vue keeps track of individual list elements in the DOM as they are changed or reordered (added, deleted, etc): https://vuejs.org/v2/guide/list.html#key

In the context of enter/leave transitions, a key is a way for Vue to distinguish between two or more elements with the same HTML tag, to keep track of elements as they are entering/leaving-- in our case 2 paragraph tags. As Vue manages the transition between the front and back of the card, it needs a way to keep track of which paragraph tag contains the info for the front of the card and which paragraph contains info for the back, to ensure the correct element is transitioned in/out at the correct time.

The key can be anything as long as it's a name or number that's unique from all the other elements. If we were managing transitions between 3 or more items, each item would need a unique key. In many cases, that would be a unique ID number. See the docs for further explanation: https://vuejs.org/v2/guide/transitions.html#Transitioning-Between-Elements

Hope this helps!