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

谢谢

[编辑]

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

Answer 1

当div具有活动类时，我想将不透明度更改为1.如果div没有活动类，我想将不透明度更改为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

CSS3 - 不透明度转换无效

4 个答案: