Kevin Powell - Community•8mo ago

[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%
        );
    }
}

13 Replies

missymae•8mo ago

What do you mean it worked with html? There might be a problem when background is a different color format in different rules. For example here you have rgb and rgba , and you might fix the problem by choosing only one to use everywhere for that element.

kingtigerknightOP•8mo ago

Like the html file not vue. I tried only choose one but that didn't work.

EIO•8mo ago

It would be nice to have a replica of this issue on codepen. A lot of things are going on, over which we would just be speculating

MarkBoots•8mo ago

maybe it is because you're not telling what property to transition. also, not all properties/values can transition (such as bg gradients)

kingtigerknightOP•8mo ago

Only thing I have is just this

<template>
    <nav>
        <a href="#">Home</a>
        <a href="#">Battle</a>
    </nav>
</template>

<template>
    <nav>
        <a href="#">Home</a>
        <a href="#">Battle</a>
    </nav>
</template>

I just started this like a few mins ago, added a nav, added some scss thats it XD I went to try that and also tried just removing the gradient since maybe that was it

a:hover {
    background: $c-gold;
}

a:hover {
    background: $c-gold;
}

but that didn't seem to work. Then again the gradients worked in html, but when it went to vue it didn't worked out 😦

MarkBoots•8mo ago

in the normal <a> state there is no background-color set. so there is nothing to transition from

kingtigerknightOP•8mo ago

AH! it worked! Thanks! Thats weird tho, never needed to do that normally until Vue. Eh oh well thanks for the help1 🙂

MarkBoots•8mo ago

hm, i was just checking, normally it doesn't need it indeed. so maybe there is something else going on aswell.

missymae•8mo ago

That's part of the problem with sharing only partial code, we can't see if there are conflicts

EIO•8mo ago

I also ran to codePen to test this 😂

kingtigerknightOP•8mo ago

but thats all the code I have XD installed vue@latest deleted starting files added nav.scss added navbar.vue thats it, nothing else XD

EIO•8mo ago

So, @MarkBoots after some tests, it occurred to me. The transition from transparent bg to a colored bg is normal. What isn't normal is transitioning background image (The gradient) So, except the new code has a background color overriding the gradient, that transition isn't actually supposed to work. Remember the background property is the short form for a lot of background sub properties. So, imagine transitioning from background-color: red; to background-image: linear-gradient(...)

ἔρως•8mo ago

are you trying to style elements inside a <template> tag?

Gaming

Programming

[Solved] The "transition" doesn't work