n-collapse-transition

name	n-collapse-transition
description	Collapse transition component for smooth show/hide animations. Invoke when user needs to implement expand/collapse animations in Naive UI.
metadata	{"author":"jiaiyan","version":"1.0.0"}

Naive UI Collapse Transition Component

A collapse transition without any form of encapsulation. Provides smooth expand/collapse animations.

When to Use

Use this component when:

• Expand/Collapse: Smooth show/hide animations for content
• Accordion effects: Animated content panels
• Toggle visibility: Animated visibility transitions
• Menu items: Collapsible menu animations

When to Invoke

Invoke this skill when:

• User needs to implement expand/collapse animations
• User wants smooth height transitions
• User needs to animate content visibility
• User asks about collapse transitions

Features

• Smooth Animation: CSS-based height transition
• Appear Support: Animation on first mount
• Simple API: Show prop for visibility control
• No Encapsulation: Works with any content

API Reference

CollapseTransition Props

Name	Type	Default	Description
appear	boolean	false	Whether to play animation on first mounted.
show	boolean	true	Whether to show content.

CollapseTransition Slots

Name	Parameters	Description
default	()	The content inside the transition.

Basic Usage

Basic Collapse Transition

<template>
  <n-space vertical>
    <n-switch v-model:value="show">
      <template #checked> Show </template>
      <template #unchecked> Hide </template>
    </n-switch>
    <n-collapse-transition :show="show">
      <div style="background: rgba(128, 128, 128, 0.2); padding: 24px;">
        Content that can be collapsed
      </div>
    </n-collapse-transition>
  </n-space>
</template>

<script setup>
import { ref } from 'vue';

const show = ref(true);
</script>

With Appear

<template>
  <n-collapse-transition appear :show="show">
    <div style="background: rgba(128, 128, 128, 0.2); padding: 24px;">
      This content will animate on mount
    </div>
  </n-collapse-transition>
</template>

Common Patterns

Accordion Style

<template>
  <n-space vertical>
    <n-button @click="expanded = !expanded">
      {{ expanded ? 'Collapse' : 'Expand' }}
    </n-button>
    <n-collapse-transition :show="expanded">
      <n-card>
        <p>Line 1</p>
        <p>Line 2</p>
        <p>Line 3</p>
      </n-card>
    </n-collapse-transition>
  </n-space>
</template>

<script setup>
import { ref } from 'vue';

const expanded = ref(false);
</script>

Multiple Collapsible Sections

<template>
  <n-space vertical>
    <n-button @click="section1 = !section1"> Toggle Section 1 </n-button>
    <n-collapse-transition :show="section1">
      <div style="background: rgba(0, 128, 0, 0.1); padding: 16px;">
        Section 1 Content
      </div>
    </n-collapse-transition>

    <n-button @click="section2 = !section2"> Toggle Section 2 </n-button>
    <n-collapse-transition :show="section2">
      <div style="background: rgba(0, 128, 0, 0.2); padding: 16px;">
        Section 2 Content
      </div>
    </n-collapse-transition>
  </n-space>
</template>

<script setup>
import { ref } from 'vue';

const section1 = ref(true);
const section2 = ref(false);
</script>

With v-model

<template>
  <n-space vertical>
    <n-checkbox v-model:checked="isVisible"> Show Content </n-checkbox>
    <n-collapse-transition :show="isVisible">
      <div style="background: rgba(128, 128, 128, 0.2); padding: 24px;">
        Content controlled by checkbox
      </div>
    </n-collapse-transition>
  </n-space>
</template>

<script setup>
import { ref } from 'vue';

const isVisible = ref(true);
</script>

Nested Collapse Transitions

<template>
  <n-space vertical>
    <n-button @click="outer = !outer"> Toggle Outer </n-button>
    <n-collapse-transition :show="outer">
      <div style="background: rgba(0, 128, 0, 0.1); padding: 16px;">
        <n-button @click="inner = !inner" size="small"> Toggle Inner </n-button>
        <n-collapse-transition :show="inner">
          <div
            style="background: rgba(0, 128, 0, 0.2); padding: 16px; margin-top: 8px;"
          >
            Inner Content
          </div>
        </n-collapse-transition>
      </div>
    </n-collapse-transition>
  </n-space>
</template>

<script setup>
import { ref } from 'vue';

const outer = ref(true);
const inner = ref(true);
</script>

Best Practices

1. Use with v-model: Combine with v-model for reactive visibility control

2. Appear for initial animation: Use appear prop when you want animation on first mount

3. Avoid margin collapse: Be aware of margin collapse inside the transition

4. Content height: The transition works best with content that has a defined height

5. Combine with other components: Works well with cards, panels, and other containers

6. Performance: CSS-based transition is performant for most use cases