html - CSS3 - 不透明度过渡不起作用

Question

我正在尝试根据 class 是否处于事件状态 来更改 div 不透明度。

当 div 具有 active 类时，我想将 opacity 更改为 1。如果 div 没有 active 类，我想将 opacity 更改为 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;
}

谢谢

[编辑]

其中一个问题是我将 css 属性更改为“block”和“none”。另一个由选择的答案解决。

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.

你需要像这样组合类。

因为你有 .highlight 作为 .active 的 child。

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