Javascrupt library to control CSS transitions and animations
Often we need animate DOM elements, when it show, hide, insert or remove.
Animations only for javascript have long been outdated. Javascript should control the animation described in CSS.
This library control CSS animations with 3 classes for show element: *-enter, *-enter-active, *-enter-active-to and 3 classes for hide element: *-leave, *-leave-active, *-leave-active-to
$ npm i dl-animate --save
import DLAnimate from 'dl-animate/dist/dl-animate-module';
let anyName = new DLAnimate();<script src="https://unpkg.com/dl-animate"></script>You also can find this samples on https://github.com/dmitry-lavrik/dl-aniamte/tree/master/demos
| Description | Link |
|---|---|
| Nice show/hide element | https://jsfiddle.net/88fg95w1/ |
| Nice append/remove element | https://jsfiddle.net/eLhnzLL7/ |
| Events callback | https://jsfiddle.net/n8r78jr4/ |
| Hard duration | https://jsfiddle.net/hcdcx51f/ |
| Insert element before other | https://jsfiddle.net/4qnzL450/ |
| Keyframes + animation | https://jsfiddle.net/98a4aeee/ |
| User classNames | https://jsfiddle.net/3vn9j63n/ |
| Start values in enter-leave classes | https://jsfiddle.net/L74sb1nh/ |
Show element with animation only if element is hidden now.
Hide element with animation only if element is visible now.
Insert newElement to parentElemenet and animate after it.
If insertBeforeElement is null, newElement append in parentElemenet.
If insertBeforeElement is other child of parentElemenet, newElement will insert before insertBeforeElement.
Hide element with animation and then remove element from DOM.
It's very important argument for all methods!
| Name | Type | Description | Default | Sample |
|---|---|---|---|---|
| name | String | string for class names generation | dl-nothing-doing-class | https://jsfiddle.net/88fg95w1/ |
| track | String | how we control end of animation (transition, animation, none) | transition | https://jsfiddle.net/98a4aeee/ |
| duration | Number | integer number to stop animation when track is 'none' | null | https://jsfiddle.net/hcdcx51f/ |
| classNames | Object | object with class names, which we use instead of auto generated | {} | https://jsfiddle.net/3vn9j63n/ |
| beforeEnter | Function | callback before element enter | function(el){} | https://jsfiddle.net/n8r78jr4/ |
| afterEnter | Function | callback when element was entered | function(el){} | https://jsfiddle.net/n8r78jr4/ |
| beforeLeave | Function | callback before element leave | function(el){} | https://jsfiddle.net/n8r78jr4/ |
| afterLeave | Function | callback when element was leaved | function(el){} | https://jsfiddle.net/n8r78jr4/ |
A more detailed description in the creation process.