Transitions

Vue Bootstrap 5 Transition

Transitions are built-in Vue animation feature. It is an alternative to MDBAnimation component because both are using the same CSS classes.

Move the mouse over the squares below to launch the animation.

fade-in
fade-in-down
fade-in-left
fade-in-right
fade-in-up
fade-out
fade-out-down
fade-out-left
fade-out-right
fade-out-up
slide-in-down
slide-in-left
slide-in-right
slide-in-up
slide-out-down
slide-out-left
slide-out-right
slide-out-up
slide-down
slide-left
slide-right
slide-up
zoom-in
zoom-out
tada
pulse

Basic example

Import MDBTransition from 'mdb-vue-ui-kit' and add inside an element which you want to be animated. Pass the prop name - one of the list attached below - and add to animated element v-if or v-show. On conditional rendering (or display) depends animation. More about Transitions read in Vue official documentation.

<template>
  <MDBBtn @click="animation = !animation">Change</MDBBtn>
  <MDBTransition name="slide-right">
    <MDBIcon v-show="animation" icon="car-side" size="3x"></MDBIcon>
  </MDBTransition>
</template>
<script>
  import { MDBTransition, MDBIcon, MDBBtn } from 'mdb-vue-ui-kit';
  import { ref } from "vue";

  export default {
    components: {
      MDBTransition,
      MDBIcon,
      MDBBtn
    },
    setup() {
      const animation = ref(false);

      return {
        animation,
      }
    }
  };
</script>
<script setup lang="ts">
  import { MDBTransition, MDBIcon, MDBBtn } from 'mdb-vue-ui-kit';
  import { ref } from "vue";

  const animation = ref(false);
</script>

On load example

Use prop autoInit to start the animation after loading the page. Refresh your browser to see this effect. 

<template>
  <MDBTransition name="slide-right" autoInit>
    <MDBIcon icon="car-side" size="3x"></MDBIcon>
  </MDBTransition>
</template>
<script>
  import { MDBTransition, MDBIcon } from 'mdb-vue-ui-kit';

  export default {
    components: {
      MDBTransition,
      MDBIcon,
    },
  };
</script>
<script setup lang="ts">
  import { MDBTransition, MDBIcon } from 'mdb-vue-ui-kit';
</script>

Animation list

By default, you have access to the basic & extended animations.

Basic Animations

  • fade-in
  • fade-in-down
  • fade-in-left
  • fade-in-right
  • fade-in-up
  • fade-out
  • fade-out-down
  • fade-out-left
  • fade-out-right
  • fade-out-up
  • slide-in-down
  • slide-in-left
  • slide-in-right
  • slide-in-up
  • slide-out-dDown
  • slide-out-left
  • slide-out-right
  • slide-out-up
  • slide-down
  • slide-left
  • slide-right
  • slide-up
  • zoom-in
  • zoom-out
  • tada
  • pulse

Extended Animations

  • drop-in
  • drop-out
  • fly-in
  • fly-in-up
  • fly-in-down
  • fly-in-left
  • fly-in-right
  • fly-out
  • fly-out-up
  • fly-out-down
  • fly-out-left
  • fly-out-right
  • browse-in
  • browse-out
  • browse-out-left
  • browse-out-right
  • jiggle
  • flash
  • shake
  • glow

Animations - API

Import

<script>
  import { MDBAnimations } from 'mdb-vue-ui-kit';
</script>

Properties

Name Type Default Description Example
name String '' Defines animation <MDBTransition :name="slide-right" />
autoInit Boolean false Tells if animation should automatically displays after load a page. <MDBTransition :name="slide-right" autoInit />