Transition Events Example

Transition status: has not yet started

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)
  const [transitionStatus, setTransitionStatus] = React.useState(
    'has not yet started',
  )
  return (
    <Column>
      <div style={{ marginBottom: 10 }}>
        <span>Transition status: </span>
        <b>{transitionStatus}</b>
      </div>
      <Column style={{ maxWidth: 600, width: '100%' }}>
        <ToggleButtonComponent
          expanded={expanded}
          onClick={() => setExpanded(prev => !prev)}
        />
        <CollapsibleContent
          expanded={expanded}
          transitionDuration={'1.2s'}
          onTransitionStart={() => setTransitionStatus('has started')}
          onTransitionEnd={() => setTransitionStatus('is over')}
        >
          <TextComponent />
        </CollapsibleContent>
      </Column>
    </Column>
  )
}

() => {
  const [expanded, setExpanded] = React.useState(false)
  const [transitionStatus, setTransitionStatus] = React.useState(
    'has not yet started',
  )
  return (
    <Column>
      <div style={{ marginBottom: 10 }}>
        <span>Transition status: </span>
        <b>{transitionStatus}</b>
      </div>
      <Column style={{ maxWidth: 600, width: '100%' }}>
        <ToggleButtonComponent
          expanded={expanded}
          onClick={() => setExpanded(prev => !prev)}
        />
        <CollapsibleContent
          expanded={expanded}
          transitionDuration={'1.2s'}
          onTransitionStart={() => setTransitionStatus('has started')}
          onTransitionEnd={() => setTransitionStatus('is over')}
        >
          <TextComponent />
        </CollapsibleContent>
      </Column>
    </Column>
  )
}