xl vision
  • Component
  • React Hooks
  • Playground
  • Overview
  • Color
  • Getting Start
    • Installation
  • General
    • Icon
    • Button
  • Layout
    • Grid
  • Form
    • Input
    • InputNumber
    • Textarea
  • Navigation
    • Dropdown
    • Affix
    • BackTop
    • Anchor
  • Data Display
    • Tooltip
    • Popover
    • Avatar
  • Faceback
    • Popconfirm
    • Dialog
    • Message
    • Notication
  • Animation
    • Transition
    • TransitionGroup
    • CollapseTransition
    • Ripple
  • Styles
    • Theme
    • CssBaseline
  • Basic Component
    • BaseButton
    • Portal
    • Popper
    • Modal
    • ResizeObserver

CollapseTransition

An animation component that can easily fold or unfold content with variable height or width.

Examples

Basic

The corresponding elements are wrapped by CollaseTrannsition to trigger the folding and unfolding animation effects. Customize the animation method through transitionClassName. If not specified, the default animation width/height 1s ease will be used.

Expand horizontally

Expand and collapse horizontally

Properties

PropertyDescriptionTypeDefaultRequire
inTrigger the entering and exiting animation, true means entering, false means leavingboolean-true
transitionClassesSpecify the class name during the animation, refer to CssTransitionstring-false
childrenChild nodeReact.ReactElement-true
horizontalHorizontal modeboolean--
transitionOnFirstWhether to trigger the animation when the initialization is completebooleanfalsefalse
mountOnEnterThe child nodes are only mounted when the animation is entered for the first time, see Transitionbooleanfalsefalse
unmountOnLeaveUnload the child node after the animation is out, see Transitionbooleanfalsefalse
Examples
Basic
Expand horizontally
Properties
Copyright © 2020-2021 Rhys Xia