Add active class

[ratbeard]

In our project we are using the underline-from-center animation when hovering over links in our navigation bar to add a little ✨. What we need though is a way to keep the final state of the animation active, so that we can underline the current page the user is on.

I whipped together a quick test of it on just the effect we need and its working. If you like the idea I can flesh out this PR and apply it across all the effects and the less files as well.

I could only include it if $includeClasses is true, or perhaps introduce a new variable to control its presence?

[IanLunn]

Thanks for the idea. Are you using JavaScript to add the active class when the element is hovered over?

[ratbeard]

No, we still rely on the :active pseudo-class for the animation. We also add the hvr-active class via javascript on the link representing the users current page. Here I'm on 'Home':

And when I hover over the alerts icon it animates to:

[IanLunn]

Ah, I see. I thought you meant you wanted the animation to stay stuck on after first play through.

I like the idea of the active class and would be happy to merge if you were able to flesh it out. I think it best this only work when $includeClasses is enabled. Also, it wouldn't make a difference to some of the effects (like buzz-out which ends the same way it starts) but for parity, could you include the active class for all effects regardless please?

Thanks!

[ratbeard]

I went ahead and implemented this in sass, and tested out all the effects still worked on the index page. I haven't been able to come up with a good way to make this work in less though :| Parent references found in a variable don't seem to resolve and so it compiles to: .hvr-bob &:hover, &:focus, &:active {. I think it might be possible to do it with http://lesscss.org/features/#detached-rulesets-feature and an if/else inside every effect, though that would make things more complicated.

[IanLunn]

Closest I've come to getting this working in LESS is this:

In _options.less:

.hoverSelector() {
    & when(@includeClasses = false) {
        &:hover, &:focus, &:active {
            .effectProperties();
        }
    }

    & when(@includeClasses = true) {
        &:hover, &:focus, &:active, &.@{nameSpace}-active {
            .effectProperties();
        }
    }
}

For each effect (_grow.less as an example):

/* Grow */
.grow() {
    .hacks();
    .prefixed(transition-duration, @mediumDuration);
    .prefixed(transition-property, transform);

    .hoverSelector();
    .effectProperties() {
        .prefixed(transform, scale(1.1));
    }
}

It works fine but not too keen on the fact that the properties aren't declared in .hoverSelector().