mmccall10 / el-transition Goto Github PK

Thanks for this great library, it's fixed an issue I've had with pretty much every other stimulus based transition, where the animate out works but the animate in does not. Using this library, I can animate in, but the animate out does not work.

I've tried variations of the below (I've left comments in there with experiments I've tried):

import { Controller } from '@hotwired/stimulus'
import { enter, leave } from 'el-transition'

export default class extends Controller {
  static targets = ['navbar', 'sidebar', 'background', 'panel', 'overlay']

  toggleSidebar() {
    if (this.sidebarTarget.classList.contains('hidden')) {
      // enter(this.sidebarTarget)
      this.sidebarTarget.classList.remove('hidden')
      enter(this.backgroundTarget)
      enter(this.panelTarget)
      enter(this.overlayTarget)
    } else {
      leave(this.backgroundTarget)
      leave(this.panelTarget)
      leave(this.overlayTarget)
      leave(this.sidebarTarget)
      //.then(() => {
      //   this.sidebarTarget.classList.add('hidden')
      // })
      // this.sidebarTarget.classList.add('hidden')
    }
  }
}

The markup is as follows:

<div data-app-target="sidebar">
  <div data-app-target="background"></div>
  <div data-app-target="overlay">
    <div data-app-target="panel"></div>
  </div>
</div>

Each of those elements has a full set of the data-transition-leave, data-transition-leave-from, and data-transition-leave-to attributes.

In case one would like to do something else after the transition ended. For example, removing a DOM element after it has been faded out or hidden.

This library stands to serve an important role for applications seeking to support transition effects without taking a cumbersome dependency on something like Alpine.js. But a visitor to this repository must wonder if the library has a future? It looks like PRs are piling up and it's not clear if there is any intention of maintaining this library. Can you please help set the appropriate expectation by advising as to whether this project will receive attention going forward?

without types library i need to do this in typescript projects

it's not a really big problem but would be nice have a types lib

This is awesomely simple and addresses the problem in an elegant way. Thanks for putting it together!

This library is an excellent lightweight alternative to Alpine.js and similar, but we worry about adopting something that's not actively maintained. I see there have been 2 open pull requests for some time. Is this the end of the line for el-transition?

Is it a crazy idea to be able to pass in an options object in javascript to specify the transitions needed?

Perhaps I misread the API?

Reason?

To obviate the need to repeatedly specify transition classes in html.

Proposal:

<div id="menu"     data-enter-from="we have to decorate with classes every time."  />
<div id="menu1"   data-enter-from="we have to specify it again"  />
<div id="menu2"   data-enter-from="and again"  />

enter(element,  {enterActive: 'but we can specify all the classes we need',
                 enterFrom: 'via an options object which we pass in '}
        ).then(() => 
        {console.log("there's no need to repeatedly decorate html elements if we don't want to.") })

Bad idea?