Tạo một animation cho component trong React

<Flipper flipKey={currentIndex}>
  <Navbar>
    {navbar.Config.map((n, index) => {
      // render navbar items
    })}
  </Navbar>
</Flipper>

<DropdownRoot>
  <Flipped flipId='dropdown-caret'>
    <Caret />
  </Flipped>
  <Flipped flipId='dropdown'>
    <DropdownBackground>
      {children}
    </DropdownBackground>
  </Flipped>
</DropdownRoot>

Làm 2 cái animate trên <Caret/> và <DropdownBackground/> riêng biệt, để thuộc tính overflow: hidden set trên <DropdownBackground /> không ảnh hưởng tới <Caret/>

<DropdownRoot>
  <Flipped flipId="dropdown-caret">
    <Caret />
  </Flipped>
  <Flipped flipId="dropdown">
    <DropdownBackground>
      <Flipped inverseFlipId="dropdown" scale>
        {children}
      </Flipped>
    </DropdownBackground>
  </Flipped>
</DropdownRoot>

const getFadeContainerKeyFrame = ({ animatingOut, direction }) => {
  if (!direction) return;
  return keyframes`
    from {
      transform: translateX(${
        animatingOut ? 0 : direction === 'left' ? 20 : -20
      }px);
    }
    to {
      transform: translateX(${
        !animatingOut ? 0 : direction === 'left' ? -20 : 20
      }px);
      opacity: ${animatingOut ? 0 : 1};
    }
  `;
};

const FadeContainer = styled.div`
  animation-name: ${getFadeContainerKeyFrame};
  animation-duration: ${props => props.duration * 0.5}ms;
  animation-fill-mode: forwards;
  position: ${props => (props.animatingOut ? "absolute" : "relative")};
  opacity: ${props => (props.direction && !props.animatingOut ? 0 : 1)};
  animation-timing-function: linear;
  top: 0;
  left: 0;
`

const updateAltBackground = ({
  altBackground,
  prevDropdown,
  currentDropdown
}) => {
  const prevHeight = getFirstDropdownSectionHeight(prevDropdown)
  const currentHeight = getFirstDropdownSectionHeight(currentDropdown)
  
  // we'll use this function when we want a change 
  // to happen immediately, without CSS transitions
  const immediateSetTranslateY = (el, translateY) => {
    el.style.transform = `translateY(${translateY}px)`
    el.style.transition = "transform 0s"
    requestAnimationFrame(() => (el.style.transitionDuration = ""))
  }

  if (prevHeight) {
    // transition the grey ("alt") background from its previous height
    // to its current height
    immediateSetTranslateY(altBackground, prevHeight)
    requestAnimationFrame(() => {
      altBackground.style.transform = `translateY(${currentHeight}px)`
    })
  } else {
    // immediately set the background to the appropriate height
    // since we don't have a stored value
    immediateSetTranslateY(altBackground, currentHeight)
  }
}