No libraryTransitions

Plain [hidden]

A div and one attribute. No framework, no JavaScript animation, no wrapper component.

Only in No library

Every value the manifest allows on this host, single presets and the pairs that compose. The first is what this component ships with. Both stages are the same component, so anything that changes between them is the attribute.

withoutno attribute

with easefuldata-motion="scale-fade"

host writes

[hidden]

easeful matches

[data-motion~="scale-fade"][hidden]

what runs

transition: opacity, scale, display

you write

<div hidden data-motion="scale-fade">

Where the attribute goes

The parts this demo composes, and the value each one carries. Everything inside an animated part is that part's content, so the tree stops there.

button
divdata-motion="scale-fade"

Source

apps/docs/components/demos/native/hidden.tsx

23 lines

"use client"

import { useState } from "react"
import type { DemoProps } from "@/components/demos/props"

export function PlainHidden({ motion }: DemoProps) {
  const [open, setOpen] = useState(false)

  return (
    <>
      <button type="button" className="btn" onClick={() => setOpen((v) => !v)}>
        {open ? "Hide panel" : "Show panel"}
      </button>
      <div className="panel" data-motion={motion} hidden={!open} style={{ marginTop: 12 }}>
        <p className="panel__title">A div and one attribute</p>
        <p className="panel__body">
          No framework, no JavaScript animation, no wrapper component. Toggling hidden is the
          entire integration.
        </p>
      </div>
    </>
  )
}

The whole file, read from disk at build time. Both copies above render from it, and the motion prop is the only difference between them.