mmccall10 / el-transition Goto Github PK
View Code? Open in Web Editor NEWApply Enter/Leave transitions
License: MIT License
Apply Enter/Leave transitions
License: MIT License
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?
To obviate the need to repeatedly specify transition classes in html.
<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?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.