Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add active class #54

Open
wants to merge 5 commits into
base: master
Choose a base branch
from
Open

Conversation

ratbeard
Copy link
Contributor

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
Copy link
Owner

IanLunn commented Feb 17, 2015

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

@ratbeard
Copy link
Contributor Author

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':

screen shot 2015-02-17 at 9 09 00 am

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

screen shot 2015-02-17 at 9 10 57 am

@IanLunn
Copy link
Owner

IanLunn commented Feb 17, 2015

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!

Abstracted the "&:hover, &:active, ..." selector string so
that the hvr-active class can be made conditional on the
includeClasses variable.
Unfortunately less does not expand out the parent reference &
if it is inside of a variable :(
@ratbeard
Copy link
Contributor Author

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
Copy link
Owner

IanLunn commented Apr 17, 2015

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().

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants