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

JavaScript Vue.js Basics Building a Flashcard App Flip Transition!

Kriz Ferre Fajardo
Kriz Ferre Fajardo
Front 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!

1 Answer

Treasure Porth
Treasure Porth
Treehouse Teacher

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!

Vlad Tanasie
Vlad Tanasie
7,201 Points

But how does the key initiate the animation?