CSS3-不透明度转换不起作用

Question

我试图根据是否class active来更改div opacity 。

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

谢谢

[编辑]

问题之一是我将css属性更改为“ block”和“ none”。 另一个是通过选择的答案来解决。

Answer 1

当div具有活动类时，我要将不透明度更改为1。如果div没有活动类，则要将不透明度更改为0。

您需要像这样组合类。

因为它是.highlight的孩子 ， .active具有.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