Barba: Transition not firing for initial page load of route

[timmyomahony]

I'm running version 2.0

I have a setup similar to

var routes = [
        {
            name: 'index',
            path: '/'
        }
];

barba.use(barbaRouter, {
    routes,
});

barba.init({
    transitions: [
        {
            name: 'test',
            to: {
                route: 'index'
            },
            afterEnter(data) {
                console.log('Entering');
            },
            beforeLeave(data) {
                console.log('Leaving');
            }
        },
    ]
});

I would expect my afterEnter function to run on the initial page load but it doesn't. The beforeLeave function _does_ run when I navigate away from this route (so the transition is working).

Is it intended behaviour not to run the hooks on the initial page load? I understand that the HTML content is obviously already loaded (so no technical need for Barba.js), but if you are defining animations that are to be triggered on a Barba.js transition then these animations won't run when you load the page initially. To get around this, you would need to duplicate your animations: once to handle the regular initial HTTP load and another for when you transition to that page via Barba.js

To put it another way, I would expect Barba.js to treat the initial page load as a special case of the to rule. Even though we haven't actually transitioned to the particular route/namespace, Barba.js would pretend we have to get consistent behaviour.

Am I misunderstanding something?

[xavierfoucrier]

Hi @timmyomahony,

Just try the afterAppear hook and it will work just fine: everything with appear keyword is intended to work on first load/browser refresh.

Note that we are currently brainstorming to improve this notation

Thanks for your feedback! :wink:

[timmyomahony]

Aha OK. That makes sense and I got it working with appear. Thanks for the speedy reply.

[cmalven]

@xavierfoucrier Maybe I'm missing something, but I'm using latest Barba 2.7.2 and any of the following result in an barba.hooks.x is not a function console error:

barba.hooks.appear((data) => {
  console.log('appear');
});

barba.hooks.afterAppear((data) => {
  console.log('appear');
});

It's as if the hook you describe doesn't actually exist. Its not actually in the documentation here https://barba.js.org/docs/v2/user/core.html

[cmalven]

@xavierfoucrier Nevermind, looks like it has since been renamed to once.

[xavierfoucrier]

Hi @cmalven,

Sorry for the late reply, I was not at home this weekend 😅
Yes it has been renamed in @barba/[email protected].