Presence

Manages mounting and unmounting of element with transition support.

The difference between this component from Vue Transition is it accepts css animation, and control the visibility of element.

Presence component provides enhanced control over element mounting/unmounting. It ensures animations and transitions complete before removing elements from the DOM, making it perfect for animated UI components.

API Reference

Prop	Default	Type
`present*`		`boolean` Conditional to mount or unmount the child element. Similar to `v-if`
`forceMount`		`boolean` Force the element to render all the time.\n\nUseful for programmatically render grandchild component with the exposed `present`

Event	Type
`enter`	`CustomEvent` Event handler called when the enter animation has started
`after-enter`	`CustomEvent` Event handler called when the enter animation has finished
`leave`	`CustomEvent` Event handler called when the leave animation has started
`after-leave`	`CustomEvent` Event handler called when the leave animation has finished

Read our Animation Guide to learn more about implementing animations with Presence component.

Example

<template>
  <APresence :present="isVisible">
    <div
      :data-state="isVisible ? 'open' : 'closed'"
      class="data-[state=open]:animate-fadeIn data-[state=closed]:animate-fadeOut"
    >
      <slot />
    </div>
  </APresence>
</template>

Force Mount

When you need to ensure content is always rendered regardless of the present state:

<template>
  <APresence
    v-slot="{ present }"
    :present="isVisible"
    :force-mount="true"
  >
    <div>
      This content will always be rendered

      <div v-if="present">
        This content is hidden
      </div>
    </div>
  </APresence>
</template>

Focus Scope

Manages focus within a component boundary with support for trapping and looping focus navigation.

Primitive

Compose Akar's functionality onto alternative element types or your own Vue components.