Adding Animate.css effects after replacing innerHTML

1

I have a basic controller where after the user changes some form data a related table updates the rows. I am using https://daneden.github.io/animate.css/ on my site. I can’t seem to figure out how to use Stimulus to display the effects. I can add the required CSS classes etc. and the effects work on the normal page loading - just not when the new HTML is added. I have tried something like this:

  fetch(url)
    .then(response => response.text())
    .then(html => {
    this.relatedTarget.classList.add("hidden")
    this.relatedTarget.innerHTML = html
    this.relatedTarget.classList.add("animated", "fadeIn", "slow")
    this.relatedTarget.classList.toggle("hidden")
  })

The “hidden” classes work i.e. the rows will disappear and re-appear. They just don’t fade in as I would like them to.

2

Hello @dantappin, I think the limits of animate.css are easily reached. I replaced it here and there by Velocity.js and it seems just much more suited as the animations are triggered directly from JS. At every try Animate.css was a failure or very difficult to manage for ajax request or rich behaviour.

1 Like