1

私は次の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>

リンクを最初にクリックしたときはトランジションはありませんが、それ以降のすべてのクリック（開くか閉じるか）でトランジションが発生します。

4

1 に答える 1

0

上記のコードを使用すると、移行がまったく機能しません。このフィドルを参照してください。

ただし、トランジションをすべてに変更すると、次のようになると思います

transition: all linear 1s;

それはうまくいくはずです。このフィドルで動作するようになりました ここにリンクの説明を入力してください

于 2013-01-18T18:06:07.243 に答える