Motion: [FEATURE] zIndex delay transition

[ng-hai]

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

[mattgperry]

Odd - the delay in your example should work. I feel like this is a bug.

Edit: Nice drop down btw

[EricVanDerDijs]

Hi, I would like to point out that recently I did something similar with scaleX and scaleY, and could not make it work, I do not know if this information could help on fixing the issue

initial: {
    scale: 0,
},
final: ({ calculatedWidth }) => ({
    scaleX: window.innerWidth / calculatedWidth,
    scaleY: window.innerHeight,
    transition: {
        scaleX: {
            duration: 0.3,
        },
        scaleY: {
            delay: 0.3,
            duration: 0.3,
        },
    },
}),

[mattgperry]

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

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

[mattgperry]

@EricVanDerDijs It does seem that value-specific delays aren't working, I'll take a look

[ng-hai]

Thanks @InventingWithMonster

[mattgperry]

Value-specific delay fixed in 1.6.5