CSS3 - 不透明度遷移が機能しない

Question

div opacityをclass activeに応じて変更しようとしています。

divにactiveクラスがある場合は、opacity to 1を変更します。 divにactiveクラスがない場合は、opacity to 0を変更したいと思います。

は私のCSSコードに従う：

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

[EDIT]

問題の一つは、私が "ブロック" と "なし" にCSSプロパティを変更するということでしたあなたに

をありがとう。もう一方は選択された答えによって解決されました。

Answer 1

のdivは、アクティブクラスを持っているとき、私はdiv要素がアクティブなクラスを持っていない場合は1に不透明度を変更したい、私は0に不透明度を変更したいです

このようにクラスを組み合わせる必要があります。

.highlightは、子は.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

ここでの問題はトランジションではなく、親要素（ボディ）が100％でないので効果がない高さ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

あなたのコードは95％ありましたが、トリックをやっているようです。ここでは新しい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; 
} 

は、実施例とペンへのリンクです：

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

Answer 4

これは実施例です。 Javascriptはクラスを切り替えるだけです。

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

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