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 a

Solution 1:

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;
}

Solution 2:

The problem here is not the transition, it's the height 100% which is not taking effect because the parent element (body) is not tall 100%.

$('button').on('click', function(e) {
    $("#multicanvasArea").toggleClass('active');
})

.high-light{
    position: fixed;
    width: 100%;
    height: 30px;
    top: 0;
    background-color: black;
    opacity:0;
    left: 0;
    color: white;
    transition: opacity 3s linear;
}

#multicanvasArea.active.high-light { 
    opacity:1;
}

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divid="multicanvasArea"><pclass="high-light">Highlight</p><pclass="">Other text</p></div><button>Toggle class</button>

Solution 3:

Your code was 95% there, just a few tweaks I made seem to do the trick. Here is the new css:

#multicanvasArea.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;
}

Here is a link to a pen with a working example:

http://codepen.io/anon/pen/pEjrJo

Solution 4:

this is a working example. The Javascript is only to toggle the class.

.box {
  width: 200px;
  height: 200px;
  background: pink;
  opacity: 0;
  transition: opacity 3s linear;
  &.active {
    opacity: 1;
  }
}

https://plnkr.co/edit/RZRygZieCUMVWiOVEJR8?p=preview