Barba: Problem with transition names

[johnpuddephatt]

Using barba and the css module (barba/css), simple transitions which were working with 2.9.6 don't seem to be working with 2.9.7.

I have a very simple demo here which shows the transition not working.

This same demo works as expected when I change the version back to 2.9.6.

The demo is a minimum example, the javascript is as simple as:

barba.use(barbaCss);
barba.init({
  debug: true,
  transitions: [{
    name: 'fade'
  }]
});

With 2.9.6 and with debug:true, I see the Transition found message in the console on navigation, with name: fade.

With 2.9.7 and the exact same CSS/JS, the Transition found message is shown but always with name: barba.

[psntr]

Confirm, I have the same issue…

[xavierfoucrier]

Hi @johnpuddephatt,

Recently working with @barba/css module made me think about your issue.
In fact, this is not a bug, you need to add an explicit once() hook to be able to use a custom name in your CSS:

transitions: [{
  name: 'fade',
  once() {}
}]

See https://barba.js.org/docs/plugins/css/ documentation

It could be useful to check this automatically in the library to prevent misunderstanding.
cc @thierrymichel

[xavierfoucrier]

Ok, in fact this is a bug... adding a once() hook only work once at startup... then the transition name changes to "barba".

Adding an empty enter() or leave() hook fix that: the transition name stay the same.

[superusefulstudio]

Same issues for me ...sigh!

[theamnesic]

Same here, even with enter() or leave() hook.

[xavierfoucrier]

Hi @theamnesic,

Here is a complete working example:

barba.use(barbaCss);

barba.init({
  transitions: [{
    name: 'fade',
    once() {},
    leave() {} // enter or leave hook here
  }]
});

.fade-leave,
.fade-once-to,
.fade-enter-to {
  opacity: 1;
}

.fade-enter,
.fade-once,
.fade-leave-to {
  opacity: 0;
}

.fade-leave-active,
.fade-once-active,
.fade-enter-active {
  transition: opacity 2400ms ease;
}

You should see a 2.4s transition, with custom .fade-* css class.

[theamnesic]

Ok, got it!

Maybe we can add the "once" to the Custom Role section of the documentation :

  transitions: [{
    name: 'fade',
    once() {},
    leave() {},
    enter() {}
  }, {
    name: 'slide',
    once() {},
    leave() {},
    enter() {},
    from: {
      namespace: 'home'
    },
    to: {
      namespace: 'products'
    }
  }]

.fade-leave-active,
.fade-once-active,
.fade-enter-active,
.slide-leave-active,
.slide-once-active,
.slide-enter-active {
  transition: opacity 450ms ease, transform 650ms ease-in-out;
}

.fade-leave,
.fade-once-to,
.fade-enter-to {
  opacity: 1;
}

.fade-enter,
.fade-once,
.fade-leave-to {
  opacity: 0;
}

.slide-leave,
.slide-once-to,
.slide-enter-to {
  transform: translateX(0);
}

.slide-enter,
.slide-once,
.slide-leave-to {
  transform: translateX(100%);
}

And why not precise that barbaCSS doesn't work if CSS transition is not applied to :

.[prefix]-leave-active
.[prefix]-once-active
.[prefix]-enter-active

[xavierfoucrier]

Hi @theamnesic,

I understand that the documentation doesn't cover, every time, all developer use cases, but it need to be small and consistent, with less code as possible to make it easy to read and understand.

@barba/css work without *-*-active: classes are properly set on the container, and the documentation states that this classes are applied "during the entire appearing/leaving/entering phases". The basic example from the docs also contain an .active class.

Finally, there is a complet section about how prefixes works and a "be careful" notice below.

Anyway, thanks for the suggestion :wink:

Note that @barba/css plugin may evolve in a next release, and we will add more complete codepen examples in the docs website too.