Transition modes (in-out, out-in) in Vue - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to set the transition mode to 'in-out' in a Vue <transition> component.

Vue

<transition mode="[1]">
  <div v-if="show">Content</div>
</transition>

Drag options to blanks, or click blank then click option'

Ain-out

Bout-in

Cfade

Dslide

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'fade' or 'slide' as mode values, which are not valid modes.

Confusing 'in-out' with 'out-in'.

The mode attribute controls the sequence of entering and leaving transitions. 'in-out' means the new element enters first, then the old leaves.

2fill in blank

medium

Complete the code to set the transition mode to 'out-in' in a Vue <transition> component.

Vue

<transition mode="[1]">
  <div v-if="visible">Panel</div>
</transition>

Drag options to blanks, or click blank then click option'

Ain-out

Bslide

Cfade

Dout-in

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'in-out' instead of 'out-in'.

Using invalid mode values like 'fade' or 'slide'.

The 'out-in' mode makes the old element leave first, then the new element enters.

3fill in blank

hard

Fix the error in the transition mode attribute to correctly use 'out-in'.

Vue

<transition mode=[1]>
  <div v-if="active">Box</div>
</transition>

Drag options to blanks, or click blank then click option'

A"out-in"

B"in-out"

C'out-in'

Dout-in

Attempts:

3 left

💡 Hint

Common Mistakes

Not quoting the mode value, causing a syntax error.

Using single quotes instead of double quotes in HTML attributes.

The mode attribute value must be a string wrapped in double quotes inside the template.

4fill in blank

hard

Fill both blanks to create a Vue <transition> with mode 'in-out' and a fade transition name.

Vue

<transition mode="[1]" name="[2]">
  <p v-if="showText">Hello</p>
</transition>

Drag options to blanks, or click blank then click option'

Ain-out

Bout-in

Cfade

Dslide

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing mode and name values.

Using invalid mode or name values.

The mode 'in-out' controls transition order, and 'fade' is the transition name for CSS classes.

5fill in blank

hard

Fill all three blanks to create a Vue <transition> with mode 'out-in', name 'slide', and a div with key 'box'.

Vue

<transition mode="[1]" name="[2]">
  <div v-if="visible" key=[3]>Slide Content</div>
</transition>

Drag options to blanks, or click blank then click option'

Ain-out

Bout-in

C"slide"

D"box"

Attempts:

3 left

💡 Hint

Common Mistakes

Not quoting the key value.

Using wrong mode or name values.

Omitting the key attribute causing transition glitches.

The mode is 'out-in' for transition order, name is 'slide' for CSS, and the key must be a quoted string 'box' for Vue to track element identity.