I have a animation which triggers on page load. I want to trigger the animation when I switch to another page through pagination link. Problem is even though I can fire the event and run the function, the function only adds the animation to my previous page content. As a result I don't get to see the animation when I switch pages
Dispatch event on page change
public function updatedPage($page)
{
$this->dispatch("product-animate");
}
JS animation function
function animate_products() {
let product_list = document.getElementById("products");
let delay = 0;
if (product_list != null) {
let product_cards = product_list.querySelectorAll(".card");
product_cards.forEach(card => {
card.style.animation = "0.8s ease-out slideInTop"
card.style.animationDelay = delay + "ms";
delay += 200;
});
}
}
How do I trigger this function when I switch pages in livewire and after the DOM has been updated?
Due to lack of replies, I have figured this out on my own. So for anyone who might need this in the future, the trick is to use
Livewire.hook('element.init', ({ component, element }) => {
if (component.name === "products.show") {
//re run animation code here
}
});
This will execute the animation function after the DOM is updated. Also my animate_products() function lacks a reset animation code which was also messing with my animation!
Please or to participate in this conversation.