Menu
×
×
Correct!

Exercise:

The <Transition> component can be used when flipping through elements, so that it looks good when a new element becomes visible, and when an old element is removed.

Fill the blanks so that the old element is completely removed before the new element is added:

<Transition mode="out-in"> <img src="/img_pizza.svg" v-if="imgActive === 'pizza'"> <img src="/img_apple.svg" v-else-if="imgActive === 'apple'"> <img src="/img_cake.svg" v-else-if="imgActive === 'cake'"> <img src="/img_fish.svg" v-else-if="imgActive === 'fish'"> <img src="/img_rice.svg" v-else-if="imgActive === 'rice'"> </Transition>

Not Correct

Click here to try again.

Correct!

Next ❯
<Transition ="">
  <img src="/img_pizza.svg" v-if="imgActive === 'pizza'">
  <img src="/img_apple.svg" v-else-if="imgActive === 'apple'">
  <img src="/img_cake.svg" v-else-if="imgActive === 'cake'">
  <img src="/img_fish.svg" v-else-if="imgActive === 'fish'">
  <img src="/img_rice.svg" v-else-if="imgActive === 'rice'">
</Transition>

    
  




Log in to keep your progress
Sign up to keep your progress

Completed 0 of 54 Exercises:

VUE Get started
VUE Directives
VUE Methods
VUE Computed
VUE Watchers
VUE Scaling up
VUE Components
VUE Slots
VUE Refs
VUE Lifecycle hooks
VUE Provide/Inject
VUE Routing
VUE Animations
VUE Build

×

Reset the Score?

This will reset the score of ALL 54 exercises.

Are you sure you want to continue?



×

Congratulations!

You have finished all 54 VUE exercises.

Share your score: