[FEATURE] zIndex delay transition

Is your feature request related to a problem? Please describe. I’m trying to build a dropdown selection, which changes z-index property depending on its state. But I cannot figure out a way to delay transition for z-index in some case, like this

This is my variant

const popoverVariant = {
  expand: {
    height: 'auto',
    zIndex: 1,
    transition: {
      height: {
        ease: [0.4, 0.0, 0.2, 1],
        duration: 0.3,
      },
    },
  },
  collapse: {
    height: 40,
    zIndex: 'auto',
    transition: {
      height: {
        ease: [0.4, 0.0, 0.2, 1],
        duration: 0.25,
      },
      zIndex: {
        delay: 1,
      },
    },
  },
}

Describe the solution you’d like Maybe step-end easing function can help

[nboliver]

@mattgperry How do you change the z-index with a layout animation? It should be higher during the animation and then return to normal / default on transitionEnd. I set it up like :

style={{ zIndex: 10 }}
animate={{ transitionEnd: { zIndex: 0 } }}
layoutId={`project-image-${slug}`}

but it just jumps to 0 immediately.

[mattgperry]

You can use transitionEnd to set a value at the end of an animation

https://codesandbox.io/s/framer-motion-sandbox-p9gxv