Transition is broken when using sync mode and popstate events

[xavierfoucrier]

When using the @barba/css plugin with the sync mode option, it looks like the .active class doesn't properly show up when navigating with the backward browser button.

barba.init({
  transitions: [
    {
      name: "home",
      sync: true,
      to: {
        namespace: ['home']
      },
      once() {},
      leave() {},
      enter() {}
    }, {
      name: "fade",
      to: {
        namespace: ['fade']
      },
      leave() {},
      enter() {}
    }
  ]
});

For example, navigating from home.html to fade.html will properly fade the content and display the next page, but going back to the home.html page will lead into this issue, where the .home-enter-active class is missing on the next container, breaking the transition:

Finally, the .home-enter-to class stay on the next container, even after the transition end.

Note that this is only happening in sync mode when the page that is using a synced transition to go to is loaded first, at once hook.

[gfnool]

Hi @xavierfoucrier! Any news about this fix? Or can you suggest a workaround in the meantime?

[xavierfoucrier]

Hello @gfnool, I am not using a lot @barba/css, that's probably why I haven't investigate on this currently. Keep watching 😉

[xavierfoucrier]

Hello @gfnool 👋

I pushed a fix a few minutes ago, would be great to have your feedback on this!

On my side I tested with two pages A + B:

• fade out/in transition for A ➡️ B
• fade out/in synced transition for B ➡️ A

Using both link and popstate events, everything is working fine.

Let me know! 😉

[gfnool]

Thanks @xavierfoucrier and sorry because I didn't test it yet. Next project I will give it a try.