htmx OOB Swap doesn't handle `transition: true` argument

I want to be able to do <div id="alerts" hx-swap-oob="outerHTML transition:true">, which currently leads to the complete swap not working

https://github.com/bigskysoftware/htmx/blob/ca03dabed11016f83ab09e18dc783e7e70d4ffc5/src/htmx.js#L759-L766

Jun 28 '23 11:06 Hades32

I am interested in this feature. I am looking to build an alert with:

<div id="alerts" hx-swap-oob="outerHTML settle:1s">

Looking at the code I see this is not supported yet.

Sep 03 '23 14:09 Edweis

@Edweis for alerts I have resorted to the "classes" extension. You can add and remove CSS classes after some time delay to e.g. slowly show and then hide it again

Sep 03 '23 15:09 Hades32

Thank you @Hades32 , that solves my problem!

Sep 06 '23 06:09 Edweis

I guess the fix is to change the css selector separator to something other than : since : can appear in many valid hx-swap values

Sep 09 '23 14:09 billythedummy

Is it as simple as changing the separator to a space, then parsing on a colon from there? Sounds like an easy PR!

I'm also after this fix because we can not use scroll and show modifiers:

hx-swap-oob="beforeend:#items scroll:#items:bottom"

OOB swaps being limited in this fashion is particularly painful given that WS support requires the OOB attribute

Nov 21 '23 08:11 TheQueenIsDead

Just running into this now with hx-swap-oob not supporting swap:, settle:, and delay: – fails with "is not a valid selector" error.

Feb 12 '24 10:02 aral

Are there any updates on here? Is there any alternative way to use these modifiers in hx-swap-oob?

Feb 26 '24 13:02 hasanbal