useTransition: the "transitioned" option and elements that begin "visible"

[weaverryan]

Hi again!

I've noticed what is, probably, just a missing spot in the docs for the new useTransition.

Suppose that you have an element that starts in a visible state (unlike a drop-down, which is hidden and only shown later):

<div data-controller="custom-close">
    <div data-custom-close-target="boxToClose">
        This element will fade out and in!
    </div>

    <button data-action="custom-close#leave">Close Box</button>
    <button data-action="custom-close#enter">Open Box</button>
</div>

(where the element option is set to this.boxToCloseTarget).

With this setup, on load, the boxToClose element is immediately hidden. Is that expected? What I mean is, if your element begins visible, it is required to pass the transitioned: true option when initializing useTransition (and so, this is something that just needs a mention in the docs)? Or is this not the expected behavior.

Thanks!

[adrienpoly]

you are right it is also missing the ability to set this option from the html

<div data-controller="custom-close" data-custom-close-transitioned-value="true">
    <div data-custom-close-target="boxToClose">
        This element will fade out and in!
    </div>

    <button data-action="custom-close#leave">Close Box</button>
    <button data-action="custom-close#enter">Open Box</button>
</div>

Still wondering about the naming. maybe initialState with enter | leave options would be better?

[weaverryan]

It's a bit of a longer name, but I do like initialState 👍