Question

像标题一样说。我有这段代码：https://jsfiddle.net/fwo9ym1o/

//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;，并且没有发生过渡。

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

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

Answer 1

这是因为风格的计算方式。样式更改很昂贵，因此可以在需要之前将其有效保存（调用{{1}}之类的重计检查或需要绘制下一帧）。

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

{{1}}

version 13.0.15800.18

Answer 2

我建议你改用animation，这比强制重绘更合适。

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

试试这个：

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

Answer 4

尽管标有“正确”字样。回答我投票给答案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;
}

css过渡不透明度在元素显示的位置不起作用：none然后更改为display：block

4 个答案: