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 />