Fade transition without overlapping elements during fade?

I've been trying to think of a way to do this and I'm coming up blank. I want to do a fade transition between menus and so I did it with a simple animation of the opacity of the UI elements. However it creates this undesired effect where the elements that overlap can be seen through each other when they're part way through the transition.

You can see what I mean here:


It's made of two pieces, the main panel area and the corner part which is an overlay with some transparency to blend it in to the panel, so that's why it's showing the gold bar underneath when everything becomes partially transparent:


I thought about using a large black image over the UI to fade in and out instead, but that will be a problem because that would obscure the background scene too, which is undesirable. I was wondering if there was any other way to do a fade transition where it wouldn't create this overlapping transparency issue.

Any advice would be appreciated. Thanks.

 

I'd love to see a good answer to this! I'm currently rendering the multiple UI with no transparency into a RenderTexture, and fading that RenderTexture over time in a RawImage component. Problem is, the alpha is incorrect using this method: drop shadows and other transparencies appear weaker than in the original graphics, causing a jarring "jump" when the fade begins. I've spent two full days with a friend trying to debug this issue, and our best guess is that the Camera is incorrectly writing to the RenderTexture regardless of the format and other options.

If none of your UI components are transparent, this will work well for you as I described above:

1) Camera.Render() the UI into a RenderTexture (you may want to set CanvasRenderer.cull = true on all the other UI you're not wanting to fade so they don't get included in the RenderTexture).
2) Hide the UI and create a full screen RawImage and set its texture to the RenderTexture.
3) Fade the RawImage's alpha over time.

If the RenderTexture is screen-size and set to Point filter mode, it should be nearly impossible to notice any difference when the UI is hidden and the RawImage is placed.