jquery-enter-leave
Simplifies animating elements added or removed to the DOM. Greatly inspired by functionality in Angular's ngAnimate.
Introduction
Exposes two functions on jQuery instances, enter
and leave
. enter
should be used to animate
inserts into the DOM, and leave
is used to animate removals.
Install
npm install jquery-enter-leave
Simply make sure to require('jquery-enter-leave')
to load the plugin.
If you want to load the toggle
, show
and hide
methods, also require('jquery-enter-leave/toggle')
.
enter
and leave
Sample JS:
; page;
Sample SCSS:
main
toggle
, show
and hide
The jquery-enter-leave/toggle
module overwrites the default toggle
, show
and hide
methods. However, the custom logic is only used if
!!options.transition === true
, otherwise control will be passed over the
original method.
;
CAUTION!: jQuery will call this.animate
inside these methods if an object
is passed as a parameter. So passing enter-leave
options but forgetting
to pass transtion: true
will call jQuery's animate. IE do not do (for example)
$el.show({ animateHeight: true })
.
className
A custom class to add and remove.
animateHeight
Since animating to height: auto
with CSS is not possible,
one needs to pass the animateHeight: true
. This will set
some inline CSS, using $(this).css('height', this.scrollHeight);
.
Sample SCSS:
&.animate &.enter:not(.active), &.leave.active