What are the 5 lifecycle events?
#Lifecycle events
plain schooner
fast joltBOT
Hi @plain schooner. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
Astro's View Transition API lifecycle events in order are:
-
astro:before-preparation(https://docs.astro.build/en/guides/view-transitions#astrobefore-preparation): This event fires at the beginning of the preparation phase, after navigation has started but before content is loaded. It can be used to do something before loading has started, alter loading, or change the direction of the navigation. -
astro:after-preparation(https://docs.astro.build/en/guides/view-transitions#astroafter-preparation): This event fires at the end of the preparation phase, after the new page’s content has been loaded and parsed into a document. This event occurs before the view transitions phase. -
astro:before-swap(https://docs.astro.build/en/guides/view-transitions#astrobefore-swap): This event fires before the new document replaces the current document. This event occurs inside of the view transition, where the user is still seeing a snapshot of the old page. -
astro:after-swap(https://docs.astro.build/en/guides/view-transitions#astroafter-swap): This event fires immediately after the new page replaces the old page. You can listen to this event on thedocumentand trigger actions that will occur before the new page’s DOM elements render and scripts run. -
astro:page-load(https://docs.astro.build/en/guides/view-transitions#astropage-load): This event fires at the end of page navigation, after the new page is visible to the user and blocking styles and scripts are loaded. You can listen to this event on thedocument.