Simplifies animating elements added or removed to the DOM. Greatly inspired by functionality in Angular's ngAnimate.
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.
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')
.
Sample JS:
$('main > .page').leave(options);
page.enter($('main'), options, function() {
console.log('done');
});
Sample SCSS:
main {
@include clear;
flex: 1 0 auto;
overflow-x: hidden;//needed to fix chrome animation bug (logo seems to move);
> .page {
width: 100%;
position: relative;
left: 0;
&.animate {
transition: left $transition-time;
float: left;
margin-right: -100%;
}
&.enter {
left: 100%;
&.back {
left: -100%;
}
}
&.leave.active {
left: -100%;
&.back {
left: 100%;
}
}
&.enter.active, &.leave {
left: 0;
}
}
}
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.
$('.question').on('click', function() {
$(this).next('.answer').toggle({ transition: true });
});
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 })
.
A custom class to add and remove.
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 {
transition: height 0.5s;
}
&.enter:not(.active), &.leave.active {
height: 0 !important;
}