14 replies

[Solved] The "transition" doesn't work

I just started to work with Vue with SCSS for the first time and I noticed that when I tryed transition like the code below, when I hover over my a elements, they don't have that transition time. I try to do it with normal CSS but that didn't work too but it worked with HTML. So maybe it has to do with Vue? Anyone know how to fix this?

nav {
    border-bottom: 1px solid $c-gold;

    .active {
        color: red;
    }

    a {
        padding: 0.5rem 1rem;
        transition: 200ms ease-in-out;
    }

    a:hover {
        background: $c-gold;
        background: linear-gradient(
            339deg,
            rgba(255, 200, 0, 1) 0%,
            rgb(131, 103, 0) 100%
        );
    }
}

nav {
    border-bottom: 1px solid $c-gold;

    .active {
        color: red;
    }

    a {
        padding: 0.5rem 1rem;
        transition: 200ms ease-in-out;
    }

    a:hover {
        background: $c-gold;
        background: linear-gradient(
            339deg,
            rgba(255, 200, 0, 1) 0%,
            rgb(131, 103, 0) 100%
        );
    }
}

nav {
    border-bottom: 1px solid $c-gold;

    .active {
        color: red;
    }

    a {
        padding: 0.5rem 1rem;
        transition: 200ms ease-in-out;
    }

    a:hover {
        background: $c-gold;
        background: linear-gradient(
            339deg,
            rgba(255, 200, 0, 1) 0%,
            rgb(131, 103, 0) 100%
        );
    }
}

nav {
    border-bottom: 1px solid $c-gold;

    .active {
        color: red;
    }

    a {
        padding: 0.5rem 1rem;
        transition: 200ms ease-in-out;
    }

    a:hover {
        background: $c-gold;
        background: linear-gradient(
            339deg,
            rgba(255, 200, 0, 1) 0%,
            rgb(131, 103, 0) 100%
        );
    }
}

[Solved] The "transition" doesn't work

Similar Threads

Similar Threads

Similar Threads