Feature request: allow specification of "active" animation classes

[bitpshr]

Maquette makes use of an active CSS class during animations, e.g. .slideUp-active. This pattern of building the active animation class by appending "-active" to the base animation class is problematic when using CSS modules where class names are translated in order to avoid conflicts.

Consider the following CSS:

.show {
    transition: opacity .2s;
    opacity: 0;
}

.show-active {
    opacity: 1;
}

When using CSS modules, these classes are translated to unique, locally-scoped class names, usually based on the hash of the selector:

._2ImYJCTW {
    transition: opacity .2s;
    opacity: 0;
}

.ik3ej5vm {
    opacity: 1;
}

If the base animation class for a node is specified as ._2ImYJCTW, the active animation class generated by Maquette will be ._2ImYJCTW-active, which isn't valid because .show-active is translated to .ik3ej5vm.

A possible fix would be to allow an active enter and active exit animation class to be specified when creating a node.

[johan-gorter]

Sorry for the late reply.

I think this is a good idea, as long as the people not using CSS Modules are not affected. If you like, you can make your own version of css-transitions.js and use that one. When you are ready you can make a pull request and I will merge it.

Good luck

[johan-gorter]

For our work on maquette 3, we created the maquette-css-transitions library. You can use it like this:

h('div.demo-block-item', {
  key:itemNr,
  enterAnimation: createEnterCssTransition(styles.slideUp, styles.slideUpActive)
}

I think this fully implements this feature.