Javascript添加带有转换的类答案

【问题标题】：Javascript adding class with transitionsJavascript添加带有转换的类
【发布时间】：2017-03-05 21:44:19
【问题描述】：

我有这样的测试代码：

<html>

<head>
  <style>
    .jeden {
      display: none;
      color: red;
      height: 0px;
    }
    
    .dwa {
      display: block;
    }
    
    .trzy {
      color: blue;
      opacity: 0.5;
      transition: all 2s;
      height: 50px;
      background-color: yellow;
    }
  </style>
</head>

<body>
  <p class="jeden"> Wczoraj </p>
  <button>ddd</button>
  <span id="hej">hej</span>
  <script>
    function dodaj(callback) {
      document.getElementsByTagName("p")[0].classList.add("dwa");
      alert(1);
      alert(2);
      callback();
    }

    function dodajKlase() {
      document.getElementsByTagName("p")[0].classList.add("trzy");
    }

    document.getElementsByTagName("button")[0].addEventListener("click", function() {
      dodaj(dodajKlase)
    })
  </script>
</body>

</html>

我正在玩它，因为我不了解某种机制。在上面的代码中，trzy 类中的转换工作正常。但是，如果我删除 alert(1) 和 alert(2)，则转换不起作用。一般来说，我正在尝试解决一个问题：

将带有display: block 的类添加到元素 - 元素出现，
然后通过回调函数添加一个transitions的类。

但是这个模型不起作用（我不太确定在这种情况下我是否正确理解了回调函数）。

【问题讨论】：

警报正在停止执行，因此您可以看到它正在工作。添加一些延迟。

标签： javascript callback css-transitions

【解决方案1】：

您应该在dodaj 函数中强制使用browser redraw，有几种方法可以做到这一点，一种是：element.getBoundingClientRect()

在此处了解更多信息：gist

<html>

<head>
  <style>
    .jeden {
      display: none;
      color: red;
      height: 0px;
    }
    
    .dwa {
      display: block;
    }
    
    .trzy {
      color: blue;
      opacity: 0.5;
      transition: all 2s;
      height: 50px;
      background-color: yellow;
    }
  </style>
</head>

<body>
  <p class="jeden"> Wczoraj </p>
  <button>ddd</button>
  <span id="hej">hej</span>
  <script>
    function dodaj(callback) {
      var element = document.querySelector("p.jeden");
      element.classList.add("dwa");
      element.getBoundingClientRect();

      callback();
      
    }

    function dodajKlase() {
      document.getElementsByTagName("p")[0].classList.add("trzy");
    }

    document.getElementsByTagName("button")[0].addEventListener("click", function() {
      dodaj(dodajKlase)
    })
  </script>
</body>

</html>

小注：你应该强迫自己用英文编码，这样其他人才能理解你的函数和变量名。

【讨论】：

You should force a browser redraw - 如果你有参考，那就太好了。
添加了一些强制浏览器重绘的方法及其解释
看起来不错！但是你能解释一下为什么setTimeout 和0 ms 也可以吗？（顺便说一句，我投了赞成票:)）
setTimeout with 0ms 将执行延迟到当前范围完成处理的点。这允许浏览器重绘/重绘样式更改，因为 UI 线程不会被任何正在运行的 JS 阻塞。

【解决方案2】：

将回调包装到 setTimeout() 中，它就可以工作了。

function dodaj(callback) {
  document.getElementsByTagName("p")[0].classList.add("dwa");
  setTimeout(callback, 100);
}

【讨论】：

没错，你也可以使用0。