@chakra-ui/transition

esm cjs
Common transition components for Chakra UI
Version 2.1.0 License MIT
Keywords
transitionanimationreactreact transition groupmotionchakra ui
INSTALL
Type:
Version:
- Static
- Latest Patch
- Latest Minor
- Latest Major
- 2.1.0
- 2.0.16
- 2.0.15
- 2.0.14
- 2.0.13
- 2.0.12
- 2.0.11
- 2.0.10
- 2.0.9
- 2.0.8
- 2.0.7
- 2.0.6
- 2.0.5
- 2.0.4
- 2.0.3
- 2.0.2
- 2.0.1
- 2.0.0
- 1.4.8
- 1.4.7
- 1.4.6
- 1.4.5
- 1.4.4
- 1.4.3
- 1.4.2
- 1.4.1
- 1.4.0
- 1.3.8
- 1.3.6
- 1.3.5
- 1.3.4
- 1.3.3
- 1.3.2
- 1.3.1
- 1.3.0
- 1.2.2
- 1.2.1
- 1.2.0
- 1.1.2
- 1.1.1
- 1.1.0
- 1.0.9
- 1.0.8
- 1.0.7
- 1.0.6
- 1.0.5
- 1.0.4
- 1.0.3
- 1.0.2
- 1.0.1
- 1.0.0
- 2.0.0-next.2
- 2.0.0-next.1
- 2.0.0-next.0
- 1.3.4-next.0
- 1.0.0-rc.8
- 1.0.0-rc.7
- 1.0.0-rc.6
- 1.0.0-rc.5
- 1.0.0-rc.4
- 1.0.0-rc.3
- 1.0.0-rc.2
- 1.0.0-rc.1
- 1.0.0-rc.0
- 1.0.0-next.7
- 1.0.0-next.6
- 1.0.0-next.5
- 1.0.0-next.4
- 1.0.0-next.3
- 1.0.0-next.2
- 1.0.0-next.1
- 1.0.0-next.0
- 0.0.0-pr-202215132532
- 0.0.0-pr-202215125733
- 0.0.0-pr-20221512359
- 0.0.0-pr-20221512346
- 0.0.0-pr-202215121320
- 0.0.0-pr-20221512130
- 0.0.0-pr-202215114917
- 0.0.0-pr-202215114422
- 0.0.0-pr-202215113950
- 0.0.0-pr-202215113521
- 0.0.0-pr-202215111823
- 0.0.0-pr-20221462931
- 0.0.0-pr-20221417318
- 0.0.0-pr-202214173148
- 0.0.0-pr-202214173019
- 0.0.0-pr-202214171317
- 0.0.0-pr-20221272450
- 0.0.0-pr-20221272130
- 0.0.0-pr-20221263715
- 0.0.0-pr-20221263638
- 0.0.0-pr-202212011232
- 0.0.0-pr-20221173648
- 0.0.0-pr-20221173228
- 0.0.0-pr-202211713187
- 0.0.0-pr-202211594731
- 0.0.0-pr-20221152447
- 0.0.0-pr-2022114224724
- 0.0.0-pr-202211224227
- 0.0.0-pr-202211224055
- 0.0.0-pr-202208164521
- 0.0.0-pr-20220816386
- 0.0.0-pr-202208163634
- 0.0.0-pr-20220620149
- 0.0.0-pr-202206192031
- 0.0.0-pr-20220483049
- 0.0.0-pr-20220421928
- 0.0.0-pr-202204174930
- 0.0.0-pr-202204174042
- 0.0.0-pr-202204173424
- 0.0.0-pr-202203231241
- 0.0.0-pr-202203225541
- 0.0.0-pr-20220259146
- 0.0.0-pr-20220258462
- 0.0.0-pr-202202584437
- 0.0.0-pr-20220251866
- 0.0.0-pr-202202495553
- 0.0.0-pr-202202495536
- 0.0.0-pr-202202495259
- 0.0.0-pr-2022024234531
- 0.0.0-pr-202202423375
- 0.0.0-pr-2022024212254
- 0.0.0-pr-202202410034
- 0.0.0-pr-2022020961
- 0.0.0-pr-202202092345
- 0.0.0-pr-20220209192
- 0.0.0-pr-2022014183133
- 0.0.0-pr-202201418280
- 0.0.0-pr-2022013192043
- 0.0.0-pr-20211191288
- 0.0.0-dev-20230718132637
- 0.0.0-dev-20230718130742
- 0.0.0-dev-20230718124717
- 0.0.0-dev-20230718122336
- 0.0.0-dev-20230330130626
- 0.0.0-dev-20230330124619
- 0.0.0-dev-20230330123203
- 0.0.0-dev-20230329144927
- 0.0.0-dev-20230329141708
- 0.0.0-dev-20230329140150
- 0.0.0-dev-20230329123951
- 0.0.0-dev-20230116124502
- 0.0.0-dev-20230116122157
- 0.0.0-dev-20230116120206
- 0.0.0-dev-20230112154520
- 0.0.0-dev-20230112152756
- 0.0.0-dev-20230112145104
- 0.0.0-dev-20230112143332
- 0.0.0-dev-20230112141201
- 0.0.0-dev-20230112113621
- 0.0.0-dev-20230111211417
- 0.0.0-dev-202268165050
- 0.0.0-dev-202268163535
- 0.0.0-dev-2022669710
- 0.0.0-dev-2022659431
- 0.0.0-dev-2022659325
- 0.0.0-dev-202264144818
- 0.0.0-dev-20226414445
- 0.0.0-dev-202261317818
- 0.0.0-dev-202261316456
- 0.0.0-dev-2022612222012
- 0.0.0-dev-2022610103924
- 0.0.0-dev-2022610103716
- 0.0.0-dev-202256192154
- 0.0.0-dev-2022528143233
- 0.0.0-dev-20224248516
- 0.0.0-dev-20224248246
- 0.0.0-dev-202242481651
- 0.0.0-dev-2022423121615
- 0.0.0-dev-2022423121532
- 0.0.0-dev-2022423113827
- 0.0.0-dev-202236141416
- 0.0.0-dev-20223614103
- 0.0.0-dev-202236132312
- 0.0.0-dev-20221513279
- 0.0.0-dev-202215122415
- 0.0.0-dev-20221512173
- 0.0.0-dev-202215121428
- 0.0.0-dev-202215121353
- 0.0.0-dev-202215114442
- 0.0.0-dev-202215114149
- 0.0.0-dev-202215112739
- 0.0.0-dev-202215111945
- 0.0.0-dev-20221463045
- 0.0.0-dev-202213175727
- 0.0.0-dev-20221223180742
- 0.0.0-dev-202212083710
- 0.0.0-dev-2022120123118
- 0.0.0-dev-202212012129
- 0.0.0-dev-2022120114225
- 0.0.0-dev-2022120114012
- 0.0.0-dev-2022120113958
- 0.0.0-dev-202211720414
- 0.0.0-dev-2022117203714
- 0.0.0-dev-2022117201925
- 0.0.0-dev-2022117131714
- 0.0.0-dev-20221152957
- 0.0.0-dev-20221152516
- 0.0.0-dev-20221108124603
- 0.0.0-dev-20221108100218
- 0.0.0-dev-20221108093520
- 0.0.0-dev-20221108090938
- 0.0.0-dev-20221108083411
- 0.0.0-dev-20221108075029
- 0.0.0-dev-20221108073543
- 0.0.0-dev-20221108071844
- 0.0.0-dev-20221107182607
- 0.0.0-dev-20221107181117
- 0.0.0-dev-20221107161407
- 0.0.0-dev-20221017063840
- 0.0.0-dev-20220929132459
- 0.0.0-dev-20220929105632
- 0.0.0-dev-20220926165450
- 0.0.0-dev-20220926164115
- 0.0.0-dev-20220922115811
- 0.0.0-dev-20220922114557
- 0.0.0-dev-20220921093814
- 0.0.0-dev-20220920121057
- 0.0.0-dev-20220824082222
- 0.0.0-dev-20220824080240
- 0.0.0-dev-20220824074122
- 0.0.0-dev-20220823195046
- 0.0.0-dev-20220823192757
- 0.0.0-dev-20220823165602
- 0.0.0-dev-20220823150801
- 0.0.0-dev-20220822184448
- 0.0.0-dev-20220822103611
- 0.0.0-dev-20220822055339
- 0.0.0-dev-20220822054045
- 0.0.0-dev-20220822051456
- 0.0.0-dev-20220820195548
- 0.0.0-dev-20220820193723
- 0.0.0-dev-20220820185458
- 0.0.0-dev-20220820173639
- 0.0.0-dev-20220820172220
- 0.0.0-dev-20220820165925
- 0.0.0-dev-20220820152257
- 0.0.0-dev-20220820124231
- 0.0.0-dev-20220813083358
- 0.0.0-dev-20220813070741
- 0.0.0-dev-20220813063717
- 0.0.0-dev-20220813055957
- 0.0.0-dev-20220813053727
- 0.0.0-dev-20220813052715
- 0.0.0-dev-20220813051625
- 0.0.0-dev-20220812060931
- 0.0.0-dev-20220811160709
- 0.0.0-dev-20220811093515
- 0.0.0-dev-20220811084042
- 0.0.0-dev-20220805062318
- 0.0.0-dev-20220804200605
- 0.0.0-dev-20220804194739
- 0.0.0-dev-20220804193815
- 0.0.0-dev-20220804193103
- 0.0.0-dev-2022031223123
- 0.0.0-dev-202202592640
- 0.0.0-dev-202202591937
- 0.0.0-dev-202202591453
- 0.0.0-dev-202202585455
- 0.0.0-dev-20220258486
- 0.0.0-dev-20220258423
- 0.0.0-dev-202202495727
- 0.0.0-dev-202202410017
- 0.0.0-dev-20220209527
- 0.0.0-canary-2021118164051
- 0.0.0-canary-2021118154929
<script src=" https://cdn.jsdelivr.net/npm/@chakra-ui/transition@2.1.0/dist/index.min.js "></script>
@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