User guide

@barba/css

Barba CSS is a style helper that manage you CSS classes during transitions.

It is mainly inspired by Vue.js transitions.

Definition

This module adds/removes CSS classes from the data-barba="container" DOM element automatically. By default, it uses .barba-xxx[-xxx] but if you add a name property to your transition, it uses .name-xxx[-xxx] CSS classes instead.

Usage

During the transition process, Barba defines custom classes according to the transition appear / leave / enter hooks and the transition name, if specified. Here is the list of hooks supported by the module:

appear

leave

enter

Example with default naming:

import barba from '@barba/core';
import barbaCss from '@barba/css';

// tell Barba to use the css module
barba.use(barbaCss);

// init Barba
barba.init();

Then customize your CSS classes like this:

/* transition active state (same for leave and enter) */
.barba-leave-active,
.barba-enter-active {
  transition: opacity 450ms ease;
}

/* initial state */
.barba-leave {
  opacity: 1;
}

.barba-enter {
  opacity: 0;
}

/* ending state */
.barba-leave-to {
  opacity: 0;
}

.barba-enter-to {
  opacity: 1;
}

/* Note that this code can be refactored for optimization */

If you want to play some transition on first load, use appear:

/* appear: active state, define the transition */
.barba-appear-active {
  transition: opacity 450ms ease;
}

/* appear: initial state */
.barba-appear {
  opacity: 0;
}

/* appear: ending state */
.barba-appear-to {
  opacity: 1;
}

If you want different transitions, you can name them and use rules.
The transition name will be used as CSS “prefix”.

import barba from '@barba/core';
import barbaCss from '@barba/css';

// tell Barba to use the css module
barba.use(barbaCss);

// init Barba
barba.init({
  transitions:[{

    // css classes will look like `.fade-xxx-[-xxx]`
    name: 'fade'
  }, {

    // css classes will look like `.slide-xxx[-xxx]`
    name: 'slide',
    from: {
      namespace: 'home'
    },
    to: {
      namespace: 'products'
    }
  }]
});
/* fade and slide transition active states (same for leave and enter) */
.fade-leave-active,
.fade-enter-active,
.slide-leave-active,
.slide-enter-active {
  transition: opacity 450ms ease, transform 650ms ease-in-out;
}

/* fade transition states */
.fade-leave,
.fade-enter-to {
  opacity: 1;
}

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

/* slide transition states */
.slide-leave,
.slide-enter-to {
  transform: translateX(0);
}

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