Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community!
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.Start your free trial
Kriz Ferre FajardoFront End Web Development Techdegree Student 18,770 Points
Please explain more about the key of Vue's transition. What if there are more than 2 keys should be used?
So "flip" is just the name of the transition, which has a "back" and "front" keys. I don't actually understand the use of the keys. Are they like keyframes in CSS? Thanks!
Treasure PorthTreehouse Teacher
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!