Challenge 1 / 1

In this video, we talk about adding a key attribute to a component so that we can transition its appearance when a prop changes.

<transition
    name="fade"
    mode="out-in"
>
    <title
        :key="currentState"
        :text="pageTitle"
    />
</transition>

How does this work?

Vue transitions look for the key attribute of a component so that it can detect changes to it and operate transitions.

By adding a key attribute, we are telling Vue that it should recursively look into props, data and computed so that it can trigger the transition if any of these things change.

Trick question! It's really the text attribute we're transitioning over, Vue detects its change and makes it work!

By adding a key attribute, Vue destroys and recreates the component every time the value of key changes. This means that we now have effectively 2 components to transition over!

Rewatch the video