MazTransitionExpand

MazTransitionExpand is a standalone component that collapses content with animations

INFO

Before you have to import the global css files in your project, follow instructions in Getting Started

Basic usage

You can change the animation duration with the prop animation-duration, should be a string - ex: "400ms"

<template>
  <MazBtn @click="isShown = !isShown">Toggle content</MazBtn>

  <div class="flex items-start">
    <MazCardSpotlight class="flex-1">
      <MazTransitionExpand>
        <div v-if="isShown">
          <p>content 1</p>
          <p>content 1</p>
          <p>content 1</p>
          <p>content 1</p>
          <p>content 1</p>
          <p>content 1</p>
          <p>content 1</p>
          <p>content 1</p>
          <p>content 1</p>
          <p>content 1</p>
          <p>content 1</p>
          <p>content 1</p>
        </div>
      </MazTransitionExpand>
    </MazCardSpotlight>
    <MazCardSpotlight class="flex-1">
      <MazTransitionExpand>
        <div v-if="!isShown">
          <p>content 2</p>
          <p>content 2</p>
          <p>content 2</p>
          <p>content 2</p>
          <p>content 2</p>
          <p>content 2</p>
          <p>content 2</p>
          <p>content 2</p>
          <p>content 2</p>
          <p>content 2</p>
          <p>content 2</p>
          <p>content 2</p>
        </div>
      </MazTransitionExpand>
    </MazCardSpotlight>
  </div>
</template>

<script lang="ts" setup>
  import MazTransitionExpand from 'maz-ui/components/MazTransitionExpand'

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

Props & Slots

Props

Prop name	Description	Type	Values	Default
animationDuration	Duration of the animation in milliseconds	string	-	'300ms'

Slots

Name	Description	Bindings
default