CSS3 - 불투명도 전환이 작동하지 않습니다.

Question

div opacity을 class active에 따라 변경하려고합니다.

div에 active 클래스가있는 경우 opacity to 1을 변경하고 싶습니다. div에 active 클래스가 없으면 opacity to 0을 변경하고 싶습니다.

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

이 문제의

[편집]

하나는 내가 CSS 속성을 "블록"과 "없음"을 변경하는 것이였다 주셔서 감사합니다 :

내 CSS 코드를 따릅니다 . 다른 하나는 답을 선택하여 해결되었습니다.

Answer 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 %입니다. 사업부 활성 클래스가있는 경우, 나는 DIV 활성 클래스가없는 경우 1. 불투명도를 변경하려면

$('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