vegetableman/transify


Add enter and leave transitions to DOM Nodes.

License: MIT

Language: JavaScript


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 an enter transition.
  • remove: removes the node and sets a leave 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

Project Statistics

Sourcerank 2
Repository Size 172 KB
Stars 1
Forks 0
Watchers 1
Open issues 0
Dependencies 9
Contributors 1
Tags 0
Created
Last updated
Last pushed

Top Contributors See all

vegetableman

Packages Referencing this Repo

transify
Add enter and leave transitions to DOM Nodes.
Latest release 1.3.0 - Updated - 1 stars

Something wrong with this page? Make a suggestion

Last synced: 2017-09-09 23:37:07 UTC

Login to resync this repository