Enter/Leave transitions for stimulusJS
npm install stimulus-transitionEnter/Leave transitions for Stimulus - inspired by the syntax from Vue and Alpine.
The controller watches for changes to computed display style to automatically run the transitions. This could be an added/removed class, a change in the element's style-attribute or adding/removing the hidden-attribute.
Run yarn add stimulus-transition to install
Register the controller in your application
``javascript
import { Application } from "stimulus"
import TransitionController from 'stimulus-transition'
const application = Application.start()
application.register("transition", TransitionController)
`
Add the transition controller to each element you want to transition and add classes for the transition.
`HTML
data-transition-enter-active="enter-class"
data-transition-enter-from="enter-from-class"
data-transition-enter-to="enter-to-class"
data-transition-leave-active="or-use multiple classes"
data-transition-leave-from="or-use multiple classes"
data-transition-leave-to="or-use multiple classes">
The controller watch for changes to the computed display style on the exact element. You can trigger this by changing the classList, the element's style or with the
-attribute. If the change would cause the element to appear/disappear, the transition will run.During the transition, the effect of your change will be canceled out and be reset afterwards. This controller will not change the display style itself.
All of the below should trigger a transition.
`javascript
export default class extends Controller {
static targets = ["options"] showOptions() {
this.optionsTarget.hidden = false;
}
hideOptions() {
this.optionsTarget.hidden = true;
}
addClass() {
this.optionsTarget.classList.add("hidden")
}
removeClass() {
this.optionsTarget.classList.add("hidden")
}
setDisplayNone() {
this.optionsTarget.style.setProperty("display", "none")
}
}
`$3
If you don't need one of the classes, you can omit the attributes. The following will just transition on enter:
HTML
data-transition-enter-active="enter-class"
data-transition-enter-from="enter-from-class"
data-transition-enter-to="enter-to-class">
$3
If you want to run the transition when the element in entered in the DOM, you should add the -attribute to the element. The value you enter is not used.
`HTML
data-transition-initial-value
data-transition-enter-active="enter-class"
data-transition-enter-from="enter-from-class"
data-transition-enter-to="enter-to-class">
$3
You can also destroy the element after running the leave transition by adding
HTML
data-transition-destroy-value
data-transition-enter-active="enter-class"
data-transition-enter-from="enter-from-class"
data-transition-enter-to="enter-to-class"
data-transition-leave-active="or-use multiple classes"
data-transition-leave-from="or-use multiple classes"
data-transition-leave-to="or-use multiple classes">
$3
If you want to run another action after the transition is completed, you can listen for the following events on the element.
*
* This would look something like:
HTML
data-transition-enter-active="enter-class"
data-transition-enter-from="enter-from-class"
data-transition-enter-to="enter-to-class"
data-action="transition:end-enter->controller#action">
$3
If you use the hidden attribute, you have to make sure that you set the display property correctly for all hidden items.
For example:
css
[hidden] {
display: none !important
}
``Bug reports and pull requests are welcome on GitHub at https://github.com/robbevp/stimulus-transition. This project is intended to be a safe, welcoming space for collaboration, and contributors are expected to adhere to the Contributor Covenant code of conduct.
This package is available as open source under the terms of the MIT License.