JavaScript添加了带有过渡的类

我有这样的测试代码：

<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)，则过渡将无效。Generaly，我正在尝试解决一个问题：

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

但是这个模型不起作用（在这种情况下，我不太确定我正确理解回调功能）。

您应该在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>

小旁注：您应该强迫自己用英语编码，以便其他人可以理解您的功能和可变名称。

将回调包装到settimeout（）中，并且起作用。

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

相关内容

最新更新

热门标签：