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

但是，我认为如果你改变你所有的过渡，就像这样

transition: all linear 1s;

那应该有用。我让它在这个小提琴中工作 enter link description here

过渡不是第一次发生

1 个答案: