1

次のコードを検討してください。

<ul class="nav">
  <li>
    <a href="#">Menu Item 1</a>
  </li>
  <li>
    <a href="#">Menu Item 2</a>
    <ul>
      <li>
        <a href="#">Menu Item 1</a>
      </li>
      <li>
        <a href="#">Menu Item 2</a>
      </li>
      <li>
        <a href="#">Menu Item 3</a>
      </li>
    </ul>
  </li>
  <li>
    <a href="#">Menu Item 3</a>
  </li>
</ul>

上記は単なる標準のメニューとサブメニューです。最初はサブメニューをオフスクリーンで非表示にしてleft: -999emいますが、親アイテムにカーソルを合わせるとサブメニューがフェードイン/アウトするように不透明度をアニメーション化しようとしています:

.nav li:hover ul {
  left: 0;
  opacity: 1;
}

.nav ul {
  position: absolute;
  top: 100%;
  left: -999em;
  opacity: 0;
  transition: opacity .3s linear;
}

ただし、メニューはフェードインするだけで、マウスアウトするとアニメーションなしで非表示になります。left: -999emプロパティが原因だと思います。設定するleft: 0と正常に動作しますが、サブメニューが非表示になっている場合でも、その上にカーソルを合わせるとサブメニューが切り替わると、このバグが発生します。この方法で不透明度をアニメーション化することは可能ですか?

コードのサンプルは次のとおりです: http://codepen.io/javiervd/pen/zseln

前もって感謝します。

4

1 に答える 1

2

ご想像のとおり、マウス アウトしたときに不透明度の遷移が見られない理由は、 left プロパティが に即座に変更されるためleft: -999em;です。そのため、要素が見えなくなったときに遷移が行われます。

迅速な修正は、左側のプロパティにもトランジションを追加することですがtransition-delay、不透明度のトランジションが発生した後に位置を変更するようにします。このようにして、ホバーアウトしたときに:hover位置が変わる前に、フェードインしてフェードアウトする必要があります。left: -999em;

CodePenの例で使用しているSCSSを使用したことがないので、エラーが発生していないことを願っていますが、次の変更により機能しました。これがあなたの望む方法だと思いますか?

body {
  width: 60%;
  margin: 50px auto;
}

.nav {
  padding: 0;
  margin: 0;
  list-style: none;

  & > li {
    float: left;
    position: relative;
    background: #ccc;
    &:hover ul {
      left: 0;
      opacity: 1;
      transition: opacity .3s linear; /* Added this */
;  
    }
  }

  a {
    display: block;
    padding: 10px 15px;
    text-decoration: none;
    &:hover {
      background: #ddd;
    }
  }

  ul {
    position: absolute;
    top: 100%;
    left: -999px;
    opacity: 0;
    transition: opacity .3s linear, left .3s linear .3s;  /* Added this */
  }
}
于 2013-06-14T19:34:12.073 に答える