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

使用上面的代码，转换对我来说根本不起作用。看到这个小提琴。

但是，我认为如果您将过渡更改为全部，就像这样

transition: all linear 1s;

那应该行得通。我让它在这个小提琴中工作 在 此处输入链接描述