Could you please check out my codepen for clarification: http://codepen.io/anon/pen/oLZOyp
Essentially, I have integrated two animations using animate.css into Bootstrap 4 show.bs.dropdown and hide.bs.dropdown events. The animations work on the first show.bs.dropdown trigger, but not on hide.
$(document).ready(function() {
//animate css function
$.fn.extend({
animateCss: function (animationName) {
var animationEnd = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';
$(this).addClass('animated ' + animationName).one(animationEnd, function() {
$(this).removeClass('animated ' + animationName);
});
}
});
$('.dropdown').on('show.bs.dropdown', function () {
$(this).find('.dropdown-menu').first().stop(true, true).animateCss('flipInX');
})
$('.dropdown').on('hide.bs.dropdown', function () {
$(this).find('.dropdown-menu').first().stop(true, true).animateCss('flipOutX');
})
});
I would greatly appreciate any assistance. Thank you.