Peppa-pig
Peppa-pig
PostsComments
KPCKevin Powell - Community
Created by Peppa-pig on 2/6/2025 in #front-end
Failing to animate(using transition) something from display none to block on hover
@Chris while your appraoch works, I was determined to make mine work. It turns out it was a selector spcificity problem: 
.test{
    opacity: 0;
    margin: 200px;
    background-color: red;
    display:none;
    width:300px;
    height:300px;
    transition: all 3s linear;
    transition-behavior: allow-discrete;
    &:hover{
        opacity: 1;
        display: block;
    }
    &.active{
        opacity: 1;
        display: block;
    }
}
.test{
    opacity: 0;
    margin: 200px;
    background-color: red;
    display:none;
    width:300px;
    height:300px;
    transition: all 3s linear;
    transition-behavior: allow-discrete;
    &:hover{
        opacity: 1;
        display: block;
    }
    &.active{
        opacity: 1;
        display: block;
    }
}
vs 
.test{
    opacity: 0;
    margin: 200px;
    background-color: red;
    display:none;
    width:300px;
    height:300px;
    transition: all 3s linear;
    transition-behavior: allow-discrete;
    &:hover{
        opacity: 1;
        display: block;
    }
   
}
.active{
        opacity: 1;
        display: block;
    }
.test{
    opacity: 0;
    margin: 200px;
    background-color: red;
    display:none;
    width:300px;
    height:300px;
    transition: all 3s linear;
    transition-behavior: allow-discrete;
    &:hover{
        opacity: 1;
        display: block;
    }
   
}
.active{
        opacity: 1;
        display: block;
    }
Second one works. Note that I had to add opacity:0 to base class and opacity:1 to active otherwise there isnt an opacity to transition out to(which I said was on of the other ones which was working for the other half of cases). The problem with the specificity was that with 0,2,0, the active opacity prop was overriding the @starting opacity. I didnt check the specificity because I hovered on vscode and it showed 0,1,0(Known bug) for the nested active class, but I really should known because thats css basics.
22 replies
KPCKevin Powell - Community
Created by Peppa-pig on 2/6/2025 in #front-end
Failing to animate(using transition) something from display none to block on hover
Sorry for replying late, I went to sleep after that https://stackoverflow.com/a/78602113 This post shows basically what i am trying, the transition version of it, and it works both ways. The only difference is it starts in the document as display:something and not none, but you can see that it's transition from none to something is smooth.
22 replies