useTransition: Persisting the state on the DOM

[gabriel-curtino]

Hi!

I'm just starting to use stimulus-use and it's great! Thanks for your work.

I've found myself with an issue with useTransition and the transitioned state. This state is being track on the js class instead on the DOM. Let me explain my case:

I have a sidebar that can can be opened/closed by two buttons. For that reason I'm instanciating the controller twice having each one of them tracking their own transitioned state. I think if we can persist this state in the target element (not in the controller element) in an attribute like data-transitioned-state, for example, then any controller instance will just read the current state from the element attribute.

This is also preferabe according the stimulus approach: "A Stimulus application’s state lives as attributes in the DOM; controllers themselves are largely stateless.

Thanks!

[AlexSabur]

You can do it like this

import { Controller } from "@hotwired/stimulus";
import { useTransition } from "stimulus-use"

export default class extends Controller {
    static values = {
        'transitioned': Boolean,
    }

    connected = false

    connect() {
        useTransition(this, {
            enterActive: "transition ease-out duration-300",
            enterFrom: "transform opacity-0 translate-y-5",
            enterTo: "transform opacity-100 translate-y-0",
            leaveActive: "transition ease-in duration-300",
            leaveFrom: "transform opacity-100 translate-y-0",
            leaveTo: "transform opacity-0 -translate-y-5",
            transitioned: this.transitionedValue
        })

        this.connected = true
    }

    transitionedValueChanged() {
        if (this.connected) {
            this.transitionedValue
                ? this.enter()
                : this.leave()
        }
    }
}