CSS3 - 不透明度转换不起作用 [英] CSS3 - Opacity transition is not working

问题描述

我试图改变 div不透明，具体取决于类是否有效。 >

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

遵循我的CSS代码：

  .high-light {
位置：固定; 
宽度：100％; 
身高：100％; 
 top：0; 
背景颜色：黑色; 
 background-color：rgba（0，0，0，0.61）; 
 opacity：0; 
剩下：0; 
 -webkit-transition：不透明度0.5s; 
 -moz-transition：不透明度0.5s; 
转换：不透明度3s线性; 
} 
 
＃multicanvasArea.active .high-light {
 opacity：1; 
 -webkit-transition：不透明度0.5s; 
 -moz-transition：不透明度0.5s; 
转换：不透明度0.5s线性; 
} 
  

谢谢

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

解决方案

当div有活动类时，I希望将不透明度更改为1.如果div没有活动类，我想将不透明度更改为0。

你需要像这样组合类。

因为它是 .highlight 作为子 .active 。

  .high-light { 
位置：固定; 
宽度：100％; 
身高：100％; 
 top：0; 
背景颜色：黑色; 
 background-color：rgba（0，0，0，0.61）; 
 opacity：0; 
剩下：0; 
 -webkit-transition：不透明度0.5s; 
 -moz-transition：不透明度0.5s; 
转换：不透明度3s线性; 
} 
 
 .high-light.active {
 opacity：1; 
 -webkit-transition：不透明度0.5s; 
 -moz-transition：不透明度0.5s; 
转换：不透明度0.5s线性; 
} 
  

I'm trying to change a div opacity depending on having the class active or not.

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.

Follows my CSS code:

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

Thank you

[EDIT]

One of the problems was that I change the css property to "block" and "none". The other was solve by the answer choosen.

解决方案

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.

You need to combine the classes like so.

As it was you have .highlight as a child of .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;
}

这篇关于CSS3 - 不透明度转换不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！