[BUG] Mixing `layoutId` and `initial`/`animate`/`exit` is buggy.

1. Describe the bug

Using layoutId with conditional rendering still triggers the initial -> animate animations, even though that visual element has already transitioned in.

2. Provide a CodeSandbox reproduction of the bug

Please see this issue occurring here:
Code Sandbox Link ->

You can see in the sandbox that the element fades every time it moves.

3. Example code

Conditionally rendering elements which have a layoutId prop as well as initial and animate.

{active && <motion.div
  layoutId="underline"
  initial={{
    opacity: 0
  }}
  animate={{
    opacity: 1,
    transition: {
      duration: 1.5
    }
  }}
/>}

4. Expected behavior

The purpose of using layoutId is to make an element look like it is moving around, when actually they are being rendered as separate elements. Adding in and out animations currently doesn't do this very well.

The initial -> animate animation should not execute when performing a shared layout animation — or there should be some way of controlling this behaviour.

Note that this does also extend to exit animations, when a container motion element is leaving in an AnimatePresence – the exit animation plays, even though it will be animating in on the next render — however I believe this deserves a second issue and is likely more complex.

5. Video or screenshots

https://github.com/framer/motion/assets/1719776/6ac1fe4e-7a78-4877-9e7a-e4aada98da96

Start with the linked CodeSandbox reproduction and trace how shared layout transitions interact with the initial and animate props. Confirm the behavior with conditional elements using layoutId; done means the initial-to-animate fade no longer runs during a shared layout transition, while the expected movement remains intact.