Question

我有一个像这样的测试代码：

<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的类。

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

Answer 1

您应该在browser redraw函数中强制使用dodaj，有多种方法可以执行此操作，其中一种方法是：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>

小方注意：您应该强迫自己使用英语编码，以便其他人可以理解您的函数和变量名称。

Answer 2

将回调包装到setTimeout（）中并且它可以正常工作。

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

Javascript添加带过渡的类

2 个答案: