How to give layout animations default animation props which aren't used during layout animation

[ampossardt]

I have a side navigation which I am animating the background of each item with layout animations. The motion component only changes position vertically to align with the currently active item. My code looks something like this:

// Other code to determine the active state of each item
<ul>
<li>
{isActive && (!items || items.length === 0) ? (
            <motion.span
              layoutId="drawer-item-bg"
              className="block w-full h-[2.75rem] bg-white rounded-md"
              transition={{ duration: 0.2 }}
            ></motion.span>
          ) : null}</li>
</ul>

Some of the navigation items have sub-navigation and so I don't render the animation item when those sub-items are active. However, when the motion component shows up, I'd like it to fade in, as well as fading out when it is unmounted. It seems like any animation props such as initial, animate, and exit are applied when the layout animation occurs, which causes it to flash each time the position changes. Is there a way to have an animation that occurs only on mount and unmount, and ignored on layout animations that are automatically detected like position?

[ampossardt]

Moments after posting this, I realized that wrapping the animating component in AnimatePresence gives the intended effect:

<ul>
  <li>
    <AnimatePresence>
    {isActive && (!items || items.length === 0) ? (
        <motion.span
            layoutId="drawer-item-bg"
            className="block w-full h-[2.75rem] bg-white rounded-md"
            transition={{ duration: 0.2 }}
        ></motion.span>
    ) : null}
    </AnimatePresence>
  </li>
</ul>

I'm leaving this comment so that hopefully it saves someone else time in the future.