Transify
Add enter and leave transitions to DOM Nodes, inspired by ReactCSSTransitionGroup addon.
Usage
.example-enter {
opacity: 0.01;
transition: opacity .5s ease-in;
}
.example-enter.example-enter-active {
opacity: 1;
}
.example-leave {
opacity: 1;
transition: opacity .5s ease-in;
}
.example-leave.example-leave-active {
opacity: 0.01;
}
const t = transify(document.querySelector('.element'), {
transitionName: 'example'
})
const child = document.createElement('div')
t.append(child) //Enter transition
r.remove(child) //Leave Transition
Installation
npm install transify --save
API
transify(element, opts)
element
: container having child nodes to be transitioned.
Valid methods:
-
append
: appends the node and sets anenter
transition. -
remove
: removes the node and sets aleave
transition.
Valid options:
-
transitionName
: Name of the transition on which enter, leave and active states would be based on. -
tick
: Interval after which to set the active class (default: 17)
Example
To run the example:
npm install
npm run example
License
MIT