Ricardo Rocha Ricardo Rocha - 2 months ago 8
CSS Question

CSS3 - Opacity transition is not working

I'm trying to change a

div opacity
depending on having the
class active
or not.

When the
div
has the
active
class, I want to change the
opacity to 1
. If the
div
does not have the
active
class, I want to change the
opacity to 0
.

Follows my CSS code:

.high-light{
position: fixed;
width: 100%;
height: 100%;
top: 0;
background-color: black;
background-color: rgba(0, 0, 0, 0.61);
opacity:0;
left: 0;
-webkit-transition: opacity 0.5s;
-moz-transition: opacity 0.5s;
transition: opacity 3s linear;
}

#multicanvasArea.active .high-light {
opacity:1;
-webkit-transition: opacity 0.5s;
-moz-transition: opacity 0.5s;
transition: opacity 0.5s linear;
}


Thank you

[EDIT]

One of the problems was that I change the css property to "block" and "none". The other was solve by the answer choosen.

Answer

When the div has the active class, I want to change the opacity to 1. If the div does not have the active class, I want to change the opacity to 0.

You need to combine the classes like so.

As it was you have .highlight as a child of .active.

.high-light{
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    background-color: black;
    background-color: rgba(0, 0, 0, 0.61);
    opacity:0;
    left: 0;
    -webkit-transition: opacity 0.5s;
    -moz-transition: opacity 0.5s;
    transition: opacity 3s linear;
}

.high-light.active { 
    opacity:1;
    -webkit-transition: opacity 0.5s;
    -moz-transition: opacity 0.5s;
    transition: opacity 0.5s linear;
}
Comments