CSS transition classes in Vue - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to add a transition class to the element.

Vue

<template>
  <div class="box" :class="{ [1]: isActive }">Content</div>
</template>

<script setup>
import { ref } from 'vue'
const isActive = ref(false)
</script>

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

Aactive

Bshow

Ctransition

Dfade

Attempts:

3 left

💡 Hint

Common Mistakes

Using unrelated class names like 'active' or 'fade' without defining them.

Forgetting to bind the class dynamically.

The 'transition' class is commonly used to apply CSS transitions in Vue components.

2fill in blank

medium

Complete the code to bind the transition name for Vue's <transition> component.

Vue

<template>
  <transition name="[1]">
    <p v-if="show">Hello</p>
  </transition>
</template>

<script setup>
import { ref } from 'vue'
const show = ref(true)
</script>

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

Afade

Bslide

Cbounce

Dzoom

Attempts:

3 left

💡 Hint

Common Mistakes

Using a transition name without matching CSS classes.

Forgetting to wrap the element inside .

The 'fade' name is a common transition name that matches CSS classes like 'fade-enter-active'.

3fill in blank

hard

Fix the error in the CSS transition class name used in Vue's <transition> component.

Vue

<template>
  <transition name="[1]">
    <div v-if="visible">Box</div>
  </transition>
</template>

<script setup>
import { ref } from 'vue'
const visible = ref(true)
</script>

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

AfadeIn

BFade

Cfade-in

Dfade

Attempts:

3 left

💡 Hint

Common Mistakes

Using uppercase letters or camelCase in transition names.

Using names that don't match CSS classes.

Vue transition class names are case-sensitive and usually lowercase like 'fade'.

4fill in blank

hard

Fill both blanks to create a CSS transition class that fades in an element.

Vue

<style>
.fade-[1] {
  opacity: 0;
}
.fade-enter-active {
  transition: opacity [2] ease-in;
}
.fade-enter-to {
  opacity: 1;
}
</style>

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

Aenter-from

B0.5s

C1s

Dease-out

Attempts:

3 left

💡 Hint

Common Mistakes

Using wrong class suffixes like 'enter-active' instead of 'enter-from'.

Setting transition duration too long or missing units.

The class 'fade-enter-from' sets the start opacity, and '0.5s' defines the transition duration.

5fill in blank

hard

Fill all three blanks to complete the Vue transition CSS for sliding an element from left with a smooth transition.

Vue

<style>
.slide-[1] {
  transform: translateX([2]);
}
.slide-enter-active {
  transition: transform [3] ease;
}
.slide-enter-to {
  transform: translateX(0);
}
</style>

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

Aenter-from

B-100%

C0.3s

Denter-to

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'enter-to' instead of 'enter-from' for the start class.

Forgetting the negative sign in translateX value.

Omitting the transition duration or units.

The 'slide-enter-from' class sets the start position off-screen left, '-100%'. The transition lasts '0.3s'.