New-UDTransition mountOnEnter/unmountOnExit Props

[parzog]

Summary of the new feature / enhancement

ref: Forum#12177

I'd like the mountOnEnter/unmountOnExit props to be optionally splatted to the <Transition /> elements via switch parameter; otherwise set as the default behavior. Transitions in their current state still reserve space in the DOM when their in is false, causing awkward spacing issues when using multiple transition boundaries for a particular result.

Minimal reproduction:

    New-UDElement -Tag "div" -id "transitionContainer" -Content {
        $tx = @{
            duration = 333
            #region Transition controllers
                nextOut = @{
                    Properties = @{
                        in = $false
                        slideDirection = "right" 
                    }
                }
                nextIn = @{
                    Properties = @{
                        in = $true
                        slideDirection = "left" 
                    }
                }
                prevOut = @{
                    Properties = @{
                        in = $false
                        slideDirection = "left"
                    }
                }
                prevIn = @{
                    Properties = @{
                        in = $true
                        slideDirection = "right"
                    }
                }
            #endregion Transition controllers
        }
        $txNextOut = $tx.nextOut
        $txNextIn = $tx.nextIn
        $txPrevOut = $tx.prevOut
        $txPrevIn = $tx.prevIn

        New-UDTransition -Slide -SlideDirection "left" -Id "txBoundary0" -In  -Timeout $tx.duration -Children {
            New-UDElement -Tag "div" -Content {
                New-UDChip -Icon (New-UDIcon -Icon "RightFromBracket" -Color "white") -Label "Transition"  -OnClick {
                    # Process transition boundary out
                    Set-UDElement -Id "txBoundary0" @txNextOut

                    # Process transition boundary in
                    Set-UDElement -Id "txBoundary1" @txNextIn
                }
            }
        }
        New-UDTransition -Slide -SlideDirection "right" -Id "txBoundary1" -Timeout $tx.duration -Children {
            New-UDElement -Tag "div" -Attributes @{ style = @{ height = 500px } } -Content {
                New-UDButton -Text "This is a tall div!" -OnClick {
                    # Process transition boundary out
                    Set-UDElement -Id "txBoundary1" @txPrevOut

                    # Process transition boundary in
                    Set-UDElement -Id "txBoundary0" @txPrevIn
                }
            }
        }
    }

Proposed technical implementation details (optional)

No response

[parzog]

This is becoming more necessary for my particular project - I have a div within the transition boundary that requires session data that doesn't exist at the time the component is mounted by default. The data is provided by a prior transition and then waits for a separate event handler to receive data from an endpoint before it is allowed to move on.

So, what is happening is, the div is running the waiting loop as soon as the parent component is mounted, which causes the entire parent component to fail to load because it is waiting on data it can't possibly have received by this point. Mounting behavior should resolve this.