Vuetify — Transitions

Vuetify is a popular UI framework for Vue apps.

In this article, we’ll look at how to work with the Vuetify framework.

Transitions

Vuetify provides us with transition effective we van add.

We can add transition with the transition prop.

For example, we can write:

<template>
  <v-container>
    <v-row class="text-center">
      <v-col col="12">
        <v-menu transition="slide-x-transition">
          <template v-slot:activator="{ on, attrs }">
            <v-btn color="primary" class="ma-2" v-bind="attrs" v-on="on">Slide X Transition</v-btn>
          </template>
          <v-list>
            <v-list-item v-for="n in 3" :key="n" link>
              <v-list-item-title v-text="`Item ${n}`"></v-list-item-title>
            </v-list-item>
          </v-list>
        </v-menu>

        <div class="mx-4 hidden-sm-and-down"></div>
      </v-col>
    </v-row>
  </v-container>
</template>
<script>
export default {
  name: "HelloWorld",
  data: () => ({}),
};
</script>

The slide-x-transition provides us with a horizontal transition applied when displaying the menu.

We can reverse the direction of the transition with slide-x-reverse-transition .

Slide Y Transitions

We have the slide-y-transition to slide elements vertically.

For example, we can write:

<template>
  <v-container>
    <v-row class="text-center">
      <v-col col="12">
        <v-menu transition="slide-y-transition">
          <template v-slot:activator="{ on, attrs }">
            <v-btn color="primary" class="ma-2" v-bind="attrs" v-on="on">Slide Y Transition</v-btn>
          </template>
          <v-list>
            <v-list-item v-for="n in 3" :key="n" link>
              <v-list-item-title v-text="`Item ${n}`"></v-list-item-title>
            </v-list-item>
          </v-list>
        </v-menu>

        <div class="mx-4 hidden-sm-and-down"></div>
      </v-col>
    </v-row>
  </v-container>
</template>
<script>
export default {
  name: "HelloWorld",
  data: () => ({}),
};
</script>

Now we have vertical transition instead of horizontal.

Also, we have the slide-y-reverse-transition to apply the transition effect in the reverse direction.

Scroll Y Transitions

We can add scroll y transition with:

<template>
  <v-container>
    <v-row class="text-center">
      <v-col col="12">
        <v-menu transition="scroll-y-transition">
          <template v-slot:activator="{ on, attrs }">
            <v-btn color="primary" class="ma-2" v-bind="attrs" v-on="on">Scroll Y Transition</v-btn>
          </template>
          <v-list>
            <v-list-item v-for="n in 5" :key="n" link>
              <v-list-item-title v-text="`item ${n}`"></v-list-item-title>
            </v-list-item>
          </v-list>
        </v-menu>

        <div class="mx-4 hidden-sm-and-down"></div>
      </v-col>
    </v-row>
  </v-container>
</template>
<script>
export default {
  name: "HelloWorld",
  data: () => ({}),
};
</script>

We just set “scroll-y-transition” as the value of transition .

Fab Transition

We can add a rotating transition with fab-transition :

<template>
  <v-container>
    <v-row class="text-center">
      <v-col col="12">
        <v-menu transition="fab-transition">
          <template v-slot:activator="{ on, attrs }">
            <v-btn color="primary" class="ma-2" v-bind="attrs" v-on="on">Fab Transition</v-btn>
          </template>
          <v-list>
            <v-list-item v-for="n in 5" :key="n" link>
              <v-list-item-title v-text="`item ${n}`"></v-list-item-title>
            </v-list-item>
          </v-list>
        </v-menu>

        <div class="mx-4 hidden-sm-and-down"></div>
      </v-col>
    </v-row>
  </v-container>
</template>
<script>
export default {
  name: "HelloWorld",
  data: () => ({}),
};
</script>

Expand Transition

The v-expand-transition component lets us add an expand transition effect.

v-expand-x-transition is the horizontal version.

For example, we can write:

<template>
  <v-container>
    <v-row class="text-center">
      <v-col col="12">
        <v-btn class="ma-2" color="primary" @click="expand = !expand">Expand Transition</v-btn>

        <v-expand-transition>
          <v-card v-show="expand" height="100" width="100" class="mx-auto"></v-card>
        </v-expand-transition>
      </v-col>
    </v-row>
  </v-container>
</template>
<script>
export default {
  name: "HelloWorld",
  data: () => ({
    expand: false
  }),
};
</script>

Now when we toggle the card, we see a transition effect applied to it.

Conclusion

We can add various transition effects with Vuetify.