different transitions to different stimulus targets?

[benkoshy]

Perhaps I have misunderstood the API?

Consider the following (in the readme for useTransitions):

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

export default class extends Controller {
    static targets = ['boxToClose']

    connect() {
        useTransition(this, {
            element: this.boxToCloseTarget,
            enterActive: 'fade-enter-active',
            enterFrom: 'fade-enter-from',  // etc.
           
            // set this, because the item *starts* in an open state
            transitioned: true,
        });
    }

    close() {
        this.leave();
    }
}

But what if you wanted to have different targets, all transitioning differently? e.g:

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

export default class extends Controller {
    static targets = ['openButton, menu'] // two targets

    connect() {
        useTransition(this, {
            element: this.openButtonTarget,
            enterActive: 'fade-enter-active', // etc           
        });
    }

    close() {
       this.menuTarget.leave();    // i want different transitions to take place, on different targets.
       this.openButton.enter();    // is this possible?


       this.leave();  // currently. applies transition to just the OpenButtonTarget
      // or perhaps I misunderstood how the API works? Help appreciated.
    }
}

[marcoroth]

Hey @benkoshy, thanks for opening this discussion!

Yeah, I think what you are describing is currently not possible, unless you create and attach two different Stimulus controllers to the same element.

We were talking a few times about reimplementing the API for the useTransistion mixin (since it's actually still in beta). Somehow it never felt quite right, but being able to transition multiple elements seems like a logical thing it should support.

There was a recent discussion in #204 about a similar topic. I think as of right, you will get the best and most flexible result if you directly use a library like el-transition. We might introduce a mixin for such a library in the future, but that's where we are for the time being.

[benkoshy]

Yeah, I think what you are describing is currently not possible, unless you create and attach two different Stimulus controllers to the same element.

This might necessitate intra-controller communication....... I think a mix-in is a winning formula.

el-transition

thanks - i've switched to this one.

We might introduce a mixin for such a library in the future, but that's where we are for the time being.

Would you be opposed to a PR on this --> basically a el-transition-like functionality except as a mix-in in stimulus-use? (Not sure I have the capacity for it, but if this is the hold up, at least I can say i had a go.)

[marcoroth]

This might necessitate intra-controller communication....... I think a mix-in is a winning formula.

Oh for sure, it was more about saying "how you could achieve it with what we have today in Stimulus Use".
I wouldn't recommend doing that thought.

Would you be opposed to a PR on this --> basically a el-transition-like functionality except as a mix-in in stimulus-use? (Not sure I have the capacity for it, but if this is the hold up, at least I can say i had a go.)

Sure, please do! It also doesn't need to be a fully featured mixin, just sharing a sketch/brainstorm also helps. Let me know if you can be of any help. Thank you! 🙌🏼