css转换不透明不工作，其中元素有显示：none然后更改为显示：块

喜欢标题说。我有这样的代码：https://jsfiddle.net/fwo9ym1o/css转换不透明不工作，其中元素有显示：none然后更改为显示：块

//javascript 
    var container = document.querySelector("#container"); 

    container.style.display = "block"; 

    //this is not working 
    //container.style.opacity = 1; 


    //this is working 
    setTimeout(function() { 
     container.style.opacity = 1; 
    }, 0); 

/css 
    .container { 
     height: 200px; 
     width: 200px; 
     background-color: salmon; 
     display: none; 
     border-radius: 5px; 
     opacity: 0; 
     transition: opacity 2s ease-in-out; 
    } 

//html 
    <div id="container" class="container"></div>

所以，我已经改变了container.style.display = "block";然后应用container.style.opacity = 1;和过渡没有发生。

它工作，如果我在一个新的线程中运行的一切。

注意：我无法使用可视性。它必须显示：无

来源

2016-09-17 Doua Beri

_“和过渡是不会发生” _预期的结果是在铬和Firefox访问的jsfiddle返回。你在哪个浏览器中尝试过'css'，'javascript'？ – guest271314

它工作，如果我使用setTimout，如果你取消注意它不起作用 –

使用'setTimeout'有什么问题？ – guest271314

这是因为样式想出办法。样式变化很昂贵，所以它们被有效地保存起来直到它们被需要（像.offsetHeight这样的重新检查检查被调用或者需要绘制下一个框架）。

下面的代码应该可以工作。它包括的内容（我认为）是怎么回事的解释：

container.style.display = "block"; 
// container is actually still invisible 
// current style hasn't been calculated 

container.offsetHeight; 
// this forces a style recalc 
// so the current style for the container is figured out. 
// without this recalc, this element effectively has no style, 
// and so when you transition from its current style (null) to a different one (opacity: 1), it just snaps to the new value. 

container.style.opacity = 1; 
// this triggers the transition. 
// because the style was recalced before the transition was triggered, 
// it will transition _from_ those values.

jsFiddle

来源

2016-09-17 15:54:09 Whothehellisthat

谢谢，已经使用getComputedStyle（容器）.opacity发现了类似的东西; –

哦。这只是给你最新的风格。我想它会做同样的事情，但我想这会更昂贵。由你决定。 – Whothehellisthat

@Whathehellisthat这个答案让我摆脱了麻烦。就我而言，我通过设置属性来触发CSS转换。序列简单地变成了'container.style.display ='block'; container.offsetHeight; container.setAttribute（成才， ''）'。谢谢。 – Manngo

试试这个：

var container = document.querySelector("#container"); 
container.style.opacity = 1; 

<div id="container" class="container"></div> 

.container { 
height: 200px; 
width: 200px; 
background-color: salmon; 
display: block; 
border-radius: 5px; 
opacity: 0; 
transition: opacity 2s ease-in-out; 
}

JSFiddle

来源

2016-09-17 15:48:57 bbonch

谢谢。但喜欢标题说。容器需要显示：在开始时没有。 –

我建议你使用animation相反，它是不是强制重绘更为合适。

var container = document.querySelector("#container"); 
 
container.classList.add('animateme');

.container { 
 
    display: none; 
 
    height: 150px; 
 
    width: 150px; 
 
    background-color: red; 
 
} 
 

 
.animateme { 
 
    display: block; 
 
    animation: animate 2s linear; 
 
} 
 

 
@keyframes animate { 
 
    0% { 
 
    opacity: 0; 
 
    } 
 
    100% { 
 
    opacity: 1; 
 
    } 
 
}

<div id="container" class="container"></div>

来源

2016-09-17 17:09:58 LGSon

尽管标有“正确”答案我投了答案from LGSon above由于它是不是一个解决方法，但采用天然CSS能力。

由于易于切换类（container.classList.toggle('animateme')）和关注点分离（JS不直接操作CSS属性），它在JS中提供了更干净的代码。

但是，我经历了动画animate在最终的零关键帧处被重置，即到opacity: 0;

为了让留我加animation-fill-mode: forwards;到.animateme选择这样（从this stackoverflow answer拍摄）

.animateme { 
    display: block; 
    animation: animate 2s linear; 
    animation-fill-mode: forwards; 
}

来源

2017-03-09 09:32:20

css转换不透明不工作，其中元素有显示：none然后更改为显示：块

回答

相关问题