Replies: 4 comments 6 replies
-
|
So, the alpine init event won't rerun when you swap the new code in. Also, can you clarify if you're using Livewire or something?
But you just need to evaluate the script tags before changing the DOM. Maybe even just use the actual browser view transitions api. |
Beta Was this translation helpful? Give feedback.
-
|
They were ages ago (V2) |
Beta Was this translation helpful? Give feedback.
-
|
I'm not using Livewire, the stack I use is Orchard Core with Liquid(Shopify) support. Here's simplified Layout file which might explain a bit more:
So based on that my script's should rerun after page change. |
Beta Was this translation helpful? Give feedback.
-
|
https://barba.js.org/docs/getstarted/markup/#DOM-structure says Barba only swaps the container (main tag). I assume alpine is not in the main tag and, anyway, alpine"init is only fired once when you load the page the first time while Barba is just swapping part of the page. You'll need to use the hooks of your tool (https://barba.js.org/docs/advanced/hooks/) to init the new components. Bear in mind that, from what you posted above, it looks like you are using a really old version of Alpine (4y old) so you need to check the old documentation. It's also harder for people to help since Alpine v2 was quite different. |
Beta Was this translation helpful? Give feedback.
-
|
So looks like my issue is not with Alpine, but with how it works after barba swap the container. Thanks, I'll do more research and if I find solution, I'll pass it here for others. |
Beta Was this translation helpful? Give feedback.
-
|
: 👍 |
Beta Was this translation helpful? Give feedback.
-
|
Yeah, those methods don't exist so you should get |
Beta Was this translation helpful? Give feedback.
-
|
Hey there, is there any more follow up info on this? i feel like there are a lot of cases with client-side loading of html with alpine, what is the suggested way to handle this? i made a simple stacklbitz demo here i tried listening for the i attached the you can see by the debug logs i added that the init function runs, but still alpine throws errors that the fields are undefined |
Beta Was this translation helpful? Give feedback.
-
|
about the demo, should load on |
Beta Was this translation helpful? Give feedback.
-
|
I just found someone solve it this way with a wrapper that checks page status & if the sub components are defined before calling them ... but that seems unnecessarily complex and verbose, isn't there a prescribed way to init alpine 'components' (or whatever you call |
Beta Was this translation helpful? Give feedback.
-
Hi all,
The issue I encounter right now is quite simple, yet I can't find the source of the problem and how to fix it.
I have very basic full page transition applied (covered by barba) with this code:
barba.init({ transitions: [{ name: 'opacity-transition', leave(data) { return gsap.to(data.current.container, { opacity: 0, duration: 1, }) }, enter(data) { return gsap.from(data.next.container, { opacity: 0, duration: 1, }) } }], });Alpine code:
document.addEventListener('alpine:init', () => { Alpine.data('animatedNumber', () => ({ startValue: 0, endValue: 1, })) });Problem:
When I navigate from url A to url B the transition will be fine, but my alpine code will not be initialised:
Alpine Expression Error: animatedNumber is not defined Expression: "animatedNumber"If I use following code in enter(data) before returning animation:
Alpine.discoverUninitializedComponents((el) => { Alpine.initializeComponent(el); });It seems to initialise components properly, but the animation stop and it looks like first half (leave) take place and second half (enter) is skipped. This literally looks like fading out previous page and refresh on next page.
Does anyone seen this issue before? Can I initialise alpine components without refreshing the page and carry on with animation?
Maybe someone used better library to animate full page transition on websites which use Alpine?
TIA
Matt
Beta Was this translation helpful? Give feedback.
All reactions