CSS3 - Opacity transition is not working - html

Question

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

Answer 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;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="multicanvasArea">
<p class="high-light">Highlight</p>
<p class="">Other text</p>
</div>
<button>Toggle class</button>

Answer 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

Answer 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