css - 过渡不是第一次发生

Question

我有以下 CSS:

.some-el {
  width: 60%;
  height: 50%;
  position: fixed;
  left: 20%;
  right: 20%;
  top: 0%;
  background-color: black;

  /* All vendor-prefixes */
  transition: transform linear 1s;
  transform: translate3d(0,-100%,0);
}

.some-el.open {
  /* All vendor-prefixes */
  transform: translate3d(0,0%,0);
}

用这个 html:

  <div class="some-el"></div>
  <a id="open" href="#">Toggle</a>
  <script>
    document.getElementById('open').onclick = function() {
      document.querySelector('.some-el').classList.toggle('open');
    };
  </script>

我第一次点击链接时没有过渡，但在所有后续点击(无论是打开还是关闭)中都会发生过渡。

Answer 1

使用上面的代码，转换对我来说根本不起作用。 See this fiddle .

但是，我认为如果你把你的过渡改为all，像这样

transition: all linear 1s;

那应该行得通。我让它在这个 fiddle 里工作 enter link description here