@chakra-ui/transition NPM

@chakra-ui/transition

Installation

yarn add @chakra-ui/transition
# or
npm i @chakra-ui/transition

Collapse

The Collapse component is used to create regions of content that can expand/collapse with a simple animation. It helps to hide content that's not immediately relevant to the user.

Import component

import { Collapse } from "@chakra-ui/transition"

Usage

function SampleSpring() {
  const { isOpen, onToggle } = useDisclosure()
  return (
    <>
      <Button onClick={onToggle}>Click</Button>
      <Collapse in={isOpen}>
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus
        terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer
        labore wes anderson cred nesciunt sapiente ea proident.
      </Collapse>
    </>
  )
}

Changing the starting height

function Example() {
  const [show, setShow] = React.useState(false)

  const handleToggle = () => setShow(!show)

  return (
    <>
      <Collapse startingHeight={20} in={show}>
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus
        terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer
        labore wes anderson cred nesciunt sapiente ea proident.
      </Collapse>
      <Button size="sm" onClick={handleToggle} mt="1rem">
        Show {show ? "Less" : "More"}
      </Button>
    </>
  )
}

// TODO: Explain the framer-motion part and how to customize the motion variants

transition animation react react transition group motion chakra ui

@chakra-ui/shared-utils

0.0.0-dev-20230718132637

9 months ago

0.0.0-dev-20230718130742

9 months ago

0.0.0-dev-20230718122336

9 months ago

2.1.0

9 months ago

0.0.0-dev-20230718124717

9 months ago

0.0.0-dev-20230330124619

1 year ago

0.0.0-dev-20230329144927

1 year ago

0.0.0-dev-20230330130626

1 year ago

2.0.16

1 year ago

0.0.0-dev-20230330123203

1 year ago

0.0.0-dev-20230329141708

1 year ago

0.0.0-dev-20230329123951

1 year ago

0.0.0-dev-20230329140150

1 year ago

0.0.0-dev-20230112154520

1 year ago

0.0.0-dev-20230112141201

1 year ago

0.0.0-dev-20230116124502

1 year ago

0.0.0-dev-20230112143332

1 year ago

0.0.0-dev-20230116120206

1 year ago

2.0.15

1 year ago

2.0.14

1 year ago

0.0.0-dev-20230112152756

1 year ago

0.0.0-dev-20230112113621

1 year ago

0.0.0-dev-20230111211417

1 year ago

0.0.0-dev-20230116122157

1 year ago

0.0.0-dev-20230112145104

1 year ago

0.0.0-dev-20221107181117

1 year ago

0.0.0-dev-20221107161407

1 year ago

0.0.0-dev-20221108075029

1 year ago

0.0.0-dev-20221108073543

1 year ago

2.0.13

1 year ago

2.0.11

2 years ago

2.0.12

1 year ago

0.0.0-dev-20221107182607

1 year ago

0.0.0-dev-20221108100218

1 year ago

0.0.0-dev-20221108071844

1 year ago

0.0.0-dev-20221108093520

1 year ago

0.0.0-dev-20221108090938

1 year ago

0.0.0-dev-20221108124603

1 year ago

0.0.0-dev-20221223180742

1 year ago

0.0.0-dev-20221017063840

2 years ago

0.0.0-dev-20221108083411

1 year ago

0.0.0-dev-20220929105632

2 years ago

2.0.10

2 years ago

0.0.0-dev-20220929132459

2 years ago

0.0.0-dev-20220823195046

2 years ago

0.0.0-dev-20220820173639

2 years ago

0.0.0-dev-20220922115811

2 years ago

0.0.0-dev-20220824074122

2 years ago

0.0.0-dev-20220926164115

2 years ago

0.0.0-dev-20220820152257

2 years ago

0.0.0-dev-20220824080240

2 years ago

0.0.0-dev-20220926165450

2 years ago

0.0.0-dev-20220822055339

2 years ago

0.0.0-dev-20220823150801

2 years ago

0.0.0-dev-20220820165925

2 years ago

0.0.0-dev-20220824082222

2 years ago

0.0.0-dev-20220820172220

2 years ago

0.0.0-dev-20220920121057

2 years ago

0.0.0-dev-20220823165602

2 years ago

0.0.0-dev-20220820195548

2 years ago

0.0.0-dev-20220820124231

2 years ago

0.0.0-dev-20220822103611

2 years ago

0.0.0-dev-20220921093814

2 years ago

0.0.0-dev-20220822184448

2 years ago

0.0.0-dev-20220822051456

2 years ago

2.0.9

2 years ago

0.0.0-dev-20220820193723

2 years ago

0.0.0-dev-20220922114557

2 years ago

0.0.0-dev-20220820185458

2 years ago

0.0.0-dev-20220822054045

2 years ago

0.0.0-dev-20220823192757

2 years ago

0.0.0-dev-20220813053727

2 years ago

0.0.0-dev-20220812060931

2 years ago

0.0.0-dev-202261316456

2 years ago

0.0.0-dev-20220813083358

2 years ago

0.0.0-dev-20220813070741

2 years ago

0.0.0-dev-2022659431

2 years ago

0.0.0-dev-20220804194739

2 years ago

0.0.0-dev-20224248516

2 years ago

0.0.0-dev-20220813055957

2 years ago

0.0.0-dev-2022610103716

2 years ago

0.0.0-dev-202242481651

2 years ago

0.0.0-dev-20220811160709

2 years ago

0.0.0-dev-2022612222012

2 years ago

0.0.0-dev-2022610103924

2 years ago

0.0.0-dev-202264144818

2 years ago

0.0.0-dev-2022528143233

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

0.0.0-dev-202261317818

2 years ago

2.0.1

2 years ago

0.0.0-dev-202268165050

2 years ago

0.0.0-dev-20226414445

2 years ago

0.0.0-dev-20220804200605

2 years ago

0.0.0-dev-202256192154

2 years ago

0.0.0-dev-20220811084042

2 years ago

0.0.0-dev-2022659325

2 years ago

0.0.0-dev-20220813052715

2 years ago

0.0.0-dev-20220813051625

2 years ago

0.0.0-dev-20224248246

2 years ago

0.0.0-dev-20220813063717

2 years ago

0.0.0-dev-20220805062318

2 years ago

0.0.0-dev-20220804193815

2 years ago

0.0.0-dev-20220804193103

2 years ago

0.0.0-dev-20220811093515

2 years ago

0.0.0-dev-202268163535

2 years ago

2.0.0

2 years ago

0.0.0-dev-2022423121615

2 years ago

2.0.0-next.2

2 years ago

0.0.0-dev-2022423121532

2 years ago

0.0.0-dev-2022423113827

2 years ago

0.0.0-dev-202236141416

2 years ago

0.0.0-dev-20223614103

2 years ago

2.0.0-next.0

2 years ago

2.0.0-next.1

2 years ago

0.0.0-dev-202236132312

2 years ago

1.4.8

2 years ago

0.0.0-pr-202215114422

2 years ago

0.0.0-pr-20220258462

2 years ago

0.0.0-pr-202203231241

2 years ago

0.0.0-dev-202202591453

2 years ago

0.0.0-pr-2022024234531

2 years ago

0.0.0-pr-20221263638

2 years ago

0.0.0-dev-202202585455

2 years ago

0.0.0-pr-202204173424

2 years ago

0.0.0-pr-20221512130

2 years ago

0.0.0-dev-202202495727

2 years ago

0.0.0-pr-20221272450

2 years ago

0.0.0-dev-202215111945

2 years ago

0.0.0-dev-202212083710

2 years ago

0.0.0-pr-20221173228

2 years ago

0.0.0-dev-202215122415

2 years ago

0.0.0-dev-202213175727

2 years ago

0.0.0-pr-202202423375

2 years ago

0.0.0-pr-202203225541

2 years ago

0.0.0-dev-202215114149

2 years ago

0.0.0-pr-202208163634

2 years ago

0.0.0-pr-202215132532

2 years ago

0.0.0-pr-202215113950

2 years ago

0.0.0-pr-202208164521

2 years ago

0.0.0-dev-202202592640

2 years ago

0.0.0-dev-2022117131714

2 years ago

0.0.0-canary-2021118164051

2 years ago

0.0.0-pr-202202495553

2 years ago

0.0.0-pr-20220620149

2 years ago

0.0.0-canary-2021118154929

2 years ago

0.0.0-pr-202214173148

2 years ago

0.0.0-dev-20220258423

2 years ago

0.0.0-pr-20221417318

2 years ago

0.0.0-pr-20221173648

2 years ago

0.0.0-pr-2022024212254

2 years ago

0.0.0-dev-20221152516

2 years ago

0.0.0-pr-20220259146

2 years ago

0.0.0-pr-202215111823

2 years ago

0.0.0-dev-2022031223123

2 years ago

0.0.0-pr-202202584437

2 years ago

0.0.0-dev-202215121428

2 years ago

0.0.0-dev-202215114442

2 years ago

0.0.0-pr-20221462931

2 years ago

0.0.0-pr-202214173019

2 years ago

0.0.0-dev-20220209527

2 years ago

0.0.0-pr-202202495536

2 years ago

0.0.0-pr-20220816386

2 years ago

0.0.0-pr-202202495259

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

0.0.0-pr-202211713187

2 years ago

0.0.0-dev-20221463045

2 years ago

0.0.0-pr-20211191288

2 years ago

0.0.0-pr-20221272130

2 years ago

0.0.0-dev-2022117201925

2 years ago

0.0.0-dev-202211720414

2 years ago

0.0.0-pr-202211594731

2 years ago

0.0.0-pr-20221152447

2 years ago

0.0.0-dev-202202410017

2 years ago

0.0.0-dev-20220258486

2 years ago

0.0.0-pr-202215114917

2 years ago

0.0.0-dev-202202591937

2 years ago

0.0.0-pr-202201418280

2 years ago

0.0.0-dev-2022120114225

2 years ago

0.0.0-pr-202215121320

2 years ago

0.0.0-pr-202204174042

2 years ago

0.0.0-dev-202212012129

2 years ago

0.0.0-pr-2022114224724

2 years ago

0.0.0-pr-20220483049

2 years ago

0.0.0-dev-202215121353

2 years ago

0.0.0-pr-202214171317

2 years ago

0.0.0-pr-202212011232

2 years ago

0.0.0-pr-20221512346

2 years ago

0.0.0-pr-20220421928

2 years ago

0.0.0-pr-20220209192

2 years ago

0.0.0-dev-20221513279

2 years ago

0.0.0-pr-2022013192043

2 years ago

0.0.0-pr-202204174930

2 years ago

0.0.0-pr-202215125733

2 years ago

0.0.0-dev-202215112739

2 years ago

0.0.0-pr-202211224227

2 years ago

0.0.0-pr-202211224055

2 years ago

0.0.0-pr-202215113521

2 years ago

0.0.0-dev-2022117203714

2 years ago

0.0.0-dev-2022120114012

2 years ago

0.0.0-dev-20221152957

2 years ago

0.0.0-dev-2022120123118

2 years ago

0.0.0-pr-20221512359

2 years ago

0.0.0-pr-2022020961

2 years ago

0.0.0-dev-2022120113958

2 years ago

0.0.0-pr-202202092345

2 years ago

0.0.0-pr-2022014183133

2 years ago

0.0.0-dev-20221512173

2 years ago

1.4.7

2 years ago

0.0.0-pr-202206192031

2 years ago

0.0.0-pr-202202410034

2 years ago

2 years ago

2 years ago

2 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago