Transition Options

Here we will see how to use transitionDuration and transitionTimingFunction in a basic and advanced mode.

Basic usage

Set a custom value for transitionDuration and transitionTimingFunction.

TOGGLE

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Diam sit amet nisl suscipit adipiscing. Diam phasellus vestibulum lorem sed risus. Mattis molestie a iaculis at erat pellentesque adipiscing commodo. Quis eleifend quam adipiscing vitae proin sagittis nisl rhoncus mattis. Leo vel orci porta non pulvinar neque laoreet suspendisse interdum. Nulla facilisi cras fermentum odio eu feugiat pretium nibh ipsum. Malesuada bibendum arcu vitae elementum curabitur vitae nunc. Dolor purus non enim praesent elementum facilisis leo. Pharetra vel turpis nunc eget lorem dolor sed viverra ipsum. At imperdiet dui accumsan sit amet nulla facilisi morbi tempus.

() => {
  const [expanded, setExpanded] = React.useState(false)
  return (
    <Column style={{ maxWidth: 600, width: '100%' }}>
      <ToggleButtonComponent
        expanded={expanded}
        onClick={() => setExpanded(prev => !prev)}
      />
      <CollapsibleContent
        expanded={expanded}
        transitionDuration="0.7s"
        transitionTimingFunction="linear"
      >
        <TextComponent />
      </CollapsibleContent>
    </Column>
  )
}

() => {
  const [expanded, setExpanded] = React.useState(false)
  return (
    <Column style={{ maxWidth: 600, width: '100%' }}>
      <ToggleButtonComponent
        expanded={expanded}
        onClick={() => setExpanded(prev => !prev)}
      />
      <CollapsibleContent
        expanded={expanded}
        transitionDuration="0.7s"
        transitionTimingFunction="linear"
      >
        <TextComponent />
      </CollapsibleContent>
    </Column>
  )
}

Advanced usage

Different transitionDuration and transitionTimingFunction can be defined for expand or collapse actions.

TOGGLE

() => {
  const [expanded, setExpanded] = React.useState(false)
  return (
    <Column style={{ maxWidth: 600, width: '100%' }}>
      <ToggleButtonComponent
        expanded={expanded}
        onClick={() => setExpanded(prev => !prev)}
      />
      <CollapsibleContent
        expanded={expanded}
        transitionDuration={expanded ? '1.5s' : '.5s'}
        transitionTimingFunction={expanded ? 'ease-out' : 'ease-in'}
      >
        <TextComponent />
      </CollapsibleContent>
    </Column>
  )
}

() => {
  const [expanded, setExpanded] = React.useState(false)
  return (
    <Column style={{ maxWidth: 600, width: '100%' }}>
      <ToggleButtonComponent
        expanded={expanded}
        onClick={() => setExpanded(prev => !prev)}
      />
      <CollapsibleContent
        expanded={expanded}
        transitionDuration={expanded ? '1.5s' : '.5s'}
        transitionTimingFunction={expanded ? 'ease-out' : 'ease-in'}
      >
        <TextComponent />
      </CollapsibleContent>
    </Column>
  )
}

Transition Options

.css-1r0pe6c{color:inherit;-webkit-text-decoration:none;text-decoration:none;}.css-1r0pe6c:hover{-webkit-text-decoration:underline;text-decoration:underline;}Basic usage

Advanced usage

Basic usage