Javascript css转换不透明度在元素具有display:none然后更改为display:block的位置不起作用

正如标题所说。我有以下代码：

//javascript
var container=document.querySelector（“容器”）；
container.style.display=“block”；
//这不起作用
//container.style.opacity=1；
//这是有效的
setTimeout（函数（）{
container.style.opacity=1；
}, 0);
/css
.集装箱{
高度：200px；
宽度：200px；
背景颜色：鲑鱼；
显示：无；
边界半径：5px；
不透明度：0；
转换：不透明度2，易于输入输出；
}
//html

因此，我更改了

container.style.display=“block”然后应用
container.style.opacity=1并且转换没有发生

如果我在一个新线程中运行所有内容，它就会工作

注意：我不能使用可见性。必须显示：无
尝试以下操作：

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

var container=document.querySelector（“容器”）；
container.style.opacity=1；
.集装箱{
高度：200px；
宽度：200px；
背景颜色：鲑鱼；
显示：块；
边界半径：5px；
不透明度：0；
转换：不透明度2，易于输入输出；
}

这是因为风格的形成方式。样式更改非常昂贵，因此可以有效地保存到需要时（调用像
.offsetHeight
这样的recalc检查，或者需要绘制下一帧）

下面的代码应该可以工作。它包括对（我认为）正在发生的事情的解释：

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.

我建议您使用
动画
，它比强制重画更合适


var container=document.querySelector（“容器”）；
container.classList.add（'animateme'）
.container{
显示：无；
高度：150像素；
宽度：150px；
背景色：红色；
}
.动画片{
显示：块；
动画：设置2s线性动画；
}
@关键帧设置动画{
0% {
不透明度：0；
}
100% {
不透明度：1；
}
}
尽管有标记为“正确”的答案，我还是投票支持这个答案，因为它不是一个解决办法，而是使用了自然的CSS功能

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

然而，我经历了动画
动画
在结束时重置为零关键帧，即
不透明度：0

为了让它保持不变，我添加了
动画填充模式：向前到
.animateme
选择器，如下所示（取自）

谢谢但正如标题所说。容器需要显示：开始时没有。“并且转换没有发生”在chromium和firefox的JSFIDLE上返回预期结果。您在哪个浏览器上尝试过
css
，
javascript
？如果我使用setTimeout，它会工作如果您取消注释它不工作，使用
setTimeout
会有什么问题？无。只是我试图避免使用setTimeout，并且很好奇为什么没有它就不能工作。谢谢，我已经在使用getComputedStyle（container）时发现了类似的东西；哦这只是给你最新的风格。我想它也会做同样的事情，但我想它会更贵。由你决定。@who他们是谁？这个答案也帮我摆脱了麻烦。在我的例子中，我通过设置一个属性触发了CSS转换。简单地说，序列变成了container.style.display='block'；集装箱。远视；container.setAttribute（someting“”）
。谢谢。很高兴我能帮忙！对于这一点，jQuery的等价物是什么？我试过<代码>$（“#我的元素”）。远视但它似乎无法解决问题
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.

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