Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

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?