Add animation.css effects after reload

jasper502

I am using this animation kit:

https://github.com/daneden/animate.css

It works normally on the site except on DataTables content. I can add the animation to table it's self and other page elements but not elements (such as a span etc) in cells:

    $('#exmaple').DataTable().ajax.reload(function() {
      $('#badge_1').addClass('animated bounce')
    });

The weird thing is that $('#badge_1').fadeOut() works as expected.

colin

We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin

jasper502

I did some digging (after trying to create a test case lol). I thought my issue was the AJAX but it seems to be jQuery.

It seems I can't use addClass. This worked:

$('#example').DataTable().ajax.reload(function() {
  var element =  document.querySelector('#badge_1');
  element.classList.add('animated', 'bounce');
});

jasper502

I also have a suspicion that some of these CSS animations are limited due to the parent CSS from the tables. For example 'bounceIn' sort of works but 'bounce' not at all. This would lead me to think it's a animate.css issue not datatables. Hope this helps someone else.