SlideTransition

Height transition for v-if / v-show

Wrap one element that appears and disappears — an expanding row, a detail panel, an inline message — and it slides open from 0 to its natural height and back, without a fixed max-height. For a disclosure with its own button, Collapsible already does this.

Basic

<script setup lang="ts">
import { ref } from "vue";
import { BlessButton, BlessSlideTransition, BlessText } from "blessing-ui";
const open = ref(true);
</script>

<template>
  <div class="col" style="max-width: 420px">
    <BlessButton size="sm" variant="outline" @click="open = !open">{{
      open ? "Hide details" : "Show details"
    }}</BlessButton>
    <BlessSlideTransition>
      <div v-if="open" style="background: var(--bless-color-surface); padding: 12px">
        <BlessText as="p">第1話「冴えない竹馬の友の口説きかた」— 2019.04.04 · 24:00</BlessText>
      </div>
    </BlessSlideTransition>
  </div>
</template>

• duration in ms (300 by default). Under reduced motion, or with duration 0, the element shows and hides at once.
• The slot needs a single root element. Its padding stays visible at height 0, so put the padding on an inner wrapper to close fully.

Usage

import { BlessSlideTransition } from "blessing-ui";

API

Props

Name	Type	Default	Description
duration	number	300	ms; 0 or reduced motion shows and hides at once
appear	boolean	—

Slots

Name	Scope	Description
default	—