TransitionCollapse 折叠动画

使用 TransitionCollapse 组件的动画效果控制内容的展示与隐藏。

基础用法

使用折叠动画组件

<script setup lang="ts">
import { TkTransitionCollapse } from "vitepress-theme-teek";
import { ref } from "vue";

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

<template>
  <button @click="visible = !visible" style="margin-bottom: 10px">点击我切换</button>

  <TkTransitionCollapse>
    <div v-show="visible">使用折叠动画组件</div>
  </TkTransitionCollapse>
</template>

隐藏源代码