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>