Vue.js 3.0 Tutorial

Vue.js 3.0 Component Advanced

Vue.js 3.0 Transitions & Animations

Vue.js 3.0 Reusable & Combinable

Vue.js 3.0 Advanced

Vue.js 3.0 Tools

Vue.js 3.0 Scale

Vue.js 3.0 Accessibility

Vue.js 3.0 Migrating from Vue2

Vue.js 3.0 Contribute Documentation

Vue.js 3.0 API References

Vue.js 3.0 Style Guide

Vue 3.0 Style Guide

Vue 3.0 transition class name change

Vue.js provides a transition wrapper component that allows you to apply transitions to elements or components when they're inserted, updated, or removed from the DOM. It's a powerful way to enhance the user experience in your applications.

The classes applied by transition are:

v-enter: Starting state for entering.
v-enter-active: Active state for entering. This is where you would put any transition or animation effects.
v-enter-to: Ending state for entering. This class is applied one frame after the element is inserted into the DOM and the v-enter class is removed.
v-leave: Starting state for leaving.
v-leave-active: Active state for leaving.
v-leave-to: Ending state for leaving. This class is applied one frame after a leave transition is triggered and the v-leave class is removed.

However, Vue 3 provides a way to customize these class names using the name prop on the transition component.

Here's an example:

<template>
  <button @click="show = !show">Toggle</button>
  <transition name="fade">
    <p v-if="show">Hello, Vue!</p>
  </transition>
</template>

<script>
export default {
  data() {
    return {
      show: true
    }
  }
}
</script>

<style>
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter-from, .fade-leave-to {
  opacity: 0;
}
.fade-enter-to, .fade-leave-from {
  opacity: 1;
}
</style>

In this example, when you click the button, it toggles the visibility of the paragraph. The transition component wraps the paragraph and applies the transition effects.

The name prop on the transition component is set to "fade", so the transition classes become fade-enter-active, fade-leave-active, fade-enter-from, fade-leave-to, fade-enter-to, and fade-leave-from.

In the CSS, we define a transition effect for the fade-enter-active and fade-leave-active classes. When the paragraph enters, it fades in from an opacity of 0 to an opacity of 1. When it leaves, it fades out from an opacity of 1 to an opacity of 0. The transition effect lasts 0.5 seconds.

Vue 3.0 transition class name binding:

Description: You can dynamically bind transition class names using the name prop in the <transition> component.

Code:

<!-- TransitionClassNameBinding.vue -->
<template>
  <transition name="fade">
    <div v-if="show" class="element">Hello, Vue!</div>
  </transition>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const show = ref(true);

    return { show };
  },
};
</script>

<style>
/* CSS */
.fade-enter-active, .fade-leave-active {
  transition: opacity 1s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}
</style>

Vue 3.0 dynamic transition class names:

Description: Use dynamic values to conditionally apply transition class names.

Code:

<!-- DynamicTransitionClassNames.vue -->
<template>
  <transition :name="transitionName">
    <div v-if="show" class="element">Hello, Vue!</div>
  </transition>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const show = ref(true);
    const transitionName = ref('fade');

    return { show, transitionName };
  },
};
</script>

<style>
/* CSS */
.fade-enter-active, .fade-leave-active {
  transition: opacity 1s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}

.slide-enter-active, .slide-leave-active {
  transition: transform 1s;
}
.slide-enter, .slide-leave-to {
  transform: translateX(100%);
}
</style>

Vue 3.0 transition component class change:

Description: Change transition class names dynamically based on a condition.

Code:

<!-- TransitionClassChange.vue -->
<template>
  <transition :name="show ? 'fade' : 'slide'">
    <div v-if="show" class="element">Hello, Vue!</div>
  </transition>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const show = ref(true);

    return { show };
  },
};
</script>

<style>
/* CSS */
.fade-enter-active, .fade-leave-active {
  transition: opacity 1s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}

.slide-enter-active, .slide-leave-active {
  transition: transform 1s;
}
.slide-enter, .slide-leave-to {
  transform: translateX(100%);
}
</style>

Vue 3.0 change transition class on condition:

Description: Change transition class names based on a condition within the transition component.

Code:

<!-- ChangeTransitionClass.vue -->
<template>
  <transition>
    <div v-if="show" class="element" :class="{ 'fade': useFade, 'slide': !useFade }">Hello, Vue!</div>
  </transition>
  <button @click="toggleTransition">Toggle Transition</button>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const show = ref(true);
    const useFade = ref(true);

    const toggleTransition = () => {
      useFade.value = !useFade.value;
    };

    return { show, useFade, toggleTransition };
  },
};
</script>

<style>
/* CSS */
.fade-enter-active, .fade-leave-active {
  transition: opacity 1s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}

.slide-enter-active, .slide-leave-active {
  transition: transform 1s;
}
.slide-enter, .slide-leave-to {
  transform: translateX(100%);
}
</style>

Vue 3.0 transition class name interpolation:

Description: Interpolate class names dynamically in the transition component.

Code:

<!-- TransitionClassNameInterpolation.vue -->
<template>
  <transition :name="transitionName">
    <div v-if="show" class="element">Hello, Vue!</div>
  </transition>
  <button @click="toggleTransition">Toggle Transition</button>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const show = ref(true);
    const transitionName = ref('fade');

    const toggleTransition = () => {
      transitionName.value = transitionName.value === 'fade' ? 'slide' : 'fade';
    };

    return { show, transitionName, toggleTransition };
  },
};
</script>

<style>
/* CSS */
.fade-enter-active, .fade-leave-active {
  transition: opacity 1s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}

.slide-enter-active, .slide-leave-active {
  transition: transform 1s;
}
.slide-enter, .slide-leave-to {
  transform: translateX(100%);
}
</style>

Vue 3.0 conditional transition class names:

Description: Use conditional statements to determine transition class names dynamically.

Code:

<!-- ConditionalTransitionClassNames.vue -->
<template>
  <transition :name="getTransitionName()">
    <div v-if="show" class="element">Hello, Vue!</div>
  </transition>
  <button @click="toggleTransition">Toggle Transition</button>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const show = ref(true);

    const toggleTransition = () => {
      show.value = !show.value;
    };

    const getTransitionName = () => {
      return show.value ? 'fade' : 'slide';
    };

    return { show, toggleTransition, getTransitionName };
  },
};
</script>

<style>
/* CSS */
.fade-enter-active, .fade-leave-active {
  transition: opacity 1s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}

.slide-enter-active, .slide-leave-active {
  transition: transform 1s;
}
.slide-enter, .slide-leave-to {
  transform: translateX(100%);
}
</style>

Vue 3.0 transition group class name change:

Description: For transition-group, class names can be dynamically changed based on conditions.

Code:

<!-- TransitionGroupClassNameChange.vue -->
<template>
  <transition-group :name="getTransitionName()">
    <div v-for="item in items" :key="item.id" class="element">{{ item.text }}</div>
  </transition-group>
  <button @click="addItem">Add Item</button>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const items = ref([
      { id: 1, text: 'Item 1' },
      { id: 2, text: 'Item 2' },
      { id: 3, text: 'Item 3' },
    ]);

    const addItem = () => {
      const newItem = { id: items.value.length + 1, text: `Item ${items.value.length + 1}` };
      items.value.push(newItem);
    };

    const getTransitionName = () => {
      return items.value.length % 2 === 0 ? 'fade' : 'slide';
    };

    return { items, addItem, getTransitionName };
  },
};
</script>

<style>
/* CSS */
.fade-enter-active, .fade-leave-active {
  transition: opacity 1s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}

.slide-enter-active, .slide-leave-active {
  transition: transform 1s;
}
.slide-enter, .slide-leave-to {
  transform: translateX(100%);
}
</style>