仅在成帧运动中的动画期间应用样式

Question

I have a collapsible panels animated with framer motion. When the panel switches from collapsed to open the overflow is visible. This breaks the layout somewhat as the content of the panel body then overlays the content below. However, I need the overflow to properly display a dropdown list inside the panels.

I came up with the following idea.

Basically I want to apply "overflow:hidden" to the StyledPanelBody when the framer animation is being executed. This would prevent the ugly effect with the overlay. However, I couldn't find any way to do that from the documentation. There is just a "transitionEnd" property.

const PanelBody = ({children, isFramed, isOpen}) => {
  const currentVariant = isOpen ? 'open' : 'closed'

  const loadFeatures = () =>
    import('./framerMotionFeatures.js').then(res => res.default)

  return (
    <LazyMotion features={loadFeatures}>
    <StyledPanelBody
      initial={currentVariant}
      animate={currentVariant}
      variants={{
        closed: {height: 0},
        open: {height: 'auto'}
      }}
      transition={{ease: 'easeInOut', duration: 0.3}}
      isFramed={isFramed}
      isOpen={isOpen}
    >
      <div>
        {children}
      </div>
    </StyledPanelBody>
    </LazyMotion>
  )
}

Answer 1

You can try this as a workaround:

variants={{
  closed: {
    height: 0,
    overflow: 'hidden',
  },
  open: {
    height: 'auto',
    transitionEnd: {
      overflow: 'unset',
    }
  }
}}