Facepunch
Razor UI Elements Don't Play Outro
Describe the bug
Any razor elements that has an intro or outro specified in the stylesheet doesn't play.
To Reproduce
Add an outro to a razor UI element and delete it with immediate = false
Expected behavior
When deleting a razor UI element the outro should play, same with the intro
Media/Files
Here's just a black screen with a button to Delete the razor element. I have set that all events have a 5 second transition ease-in-out, but as you can see it's just instant
https://user-images.githubusercontent.com/17505288/202782259-34db13a4-452f-4c98-8e9b-0b255388150a.mp4
Additional context
No response
I ran into this as well when converting my UI to razor. It would be nice if we could apply &:intro and &:outro to elements when they are programmatically created/removed via razor.
@foreach(var item in Items)
{
// <ItemThing @Item=@item />
}
where ItemThing in this case would play the intro / outro if it is created/deleted on the next re-render.
Any chance this can be added to the tracker? Can confirm it's still an issue. In my case, conditionally rendered blocks do not get an outro played on them.
I am pretty sure that outros were working for me too when deleting a panel.
But intros and outros have a habit of skipping when:
- Toggling fullscreen mid-transition.
- Destroying the panels component.
I am pretty sure that outros were working for me too when deleting a panel.
But intros and outros have a habit of skipping when:
- Toggling fullscreen mid-transition.
- Destroying the panels component.
Yes they work fine when deleting them. It's when conditionally rendering them via razor that is busted.
It might be worthwhile to provide some reproductions for your cases.
Some other edge cases around intro and outro that need some love:
- Enabling and disabling a PanelComponent does not play intro/outro
- Manually setting a class on enabled does not play transitions for said class (ie set
showwhich sets the opacity to 1, and the element has opacity: 0 and transition: opacity 1s on it)
@garrynewman Hey this is in response to the latest changes here https://sbox.game/news/june-2025#razor-outro
Here is a reproduction project with an issue and some questions. If you launch the project, you should see three different coloured squares.
White Square (Outro.razor)
When you hold down space you do NOT get the outro effect on the square. I believe this should be a bug.
Red Square (Render.razor)
Do you think the red square should render? Since we have the if (true) return; it never reaches the <root />. What do you think?
Aqua Square (Item.razor)
There are situations where you want to hide/show a UI element based on whether or not something is valid. For instance, in my example, I have a reference to a MyCustomItem which becomes null if you hold space. The issue arises that the <p>@MyCustomItem?.Name</p> ends up empty on the outro since it's null. I can't confirm it for sure, but, I feel like before your changes it would maintain the last known value during the outro.
Regardless, what's your recommendation for situations like this? Ideally, I'd like to use razor similar to the red square example and outro the entire element if it is null. Is that a reasonable request?
Let me know if you have any questions, thanks.