0

私は現在、以下を持っています

HTML

<div id="left_nav_wrapper">

   <div class="sidebar_wrapper">
      <div class="sidebar_header">Header</div>
      <div class="sidebar_content">Content</div>
   </div>
   <div class="sidebar_wrapper">
       <div class="sidebar_header">Header</div>
       <div class="sidebar_content">Content</div>
   </div>

</div>

CSS

.sidebar_wrapper { width: 150px;  }
.sidebar_header { width: 150px; background-color: #F18986;  }
.sidebar_content { display: none; width: 150px; margin-left: -150px; background-color: #444; }
.sidebar_header:hover + .sidebar_content { display: inherit; margin-left: 0px; }

彼らがヘッダーにカーソルを合わせると、コンテンツが表示されます（私はこれを行いました）。トランジションを追加して、スライドインします。

add transition: all 1s;
-webkit-transition: all 1s;

css には何もしません。.sidebar_header と .sidebar_content に追加しましたが、表示時にトランジションを使用しない理由がわかりません。

どんな助けでも感謝します！

4

4 に答える 4

1

トランジションは表示プロパティでは機能しません。ここで行ったように、height: 0 から 100px のようなプロパティを設定する必要があります。 

.sidebar_content {
    height: 0;
    width: 150px;
    margin-left: -150px;
    background-color: #444;
    -moz-transition: height 0.5s ease-in;
    -o-transition: height 0.5s ease-in;
    -webkit-transition: height 0.5s ease-in;
    transition: height 0.5s ease-in;
}

.sidebar_header:hover + .sidebar_content {
    height: 100px;
    margin-left: 0px;
}

ハイトオートへの移行はできません。sidebar_content の高さを固定したくない場合

到達しない非常に高い値に設定して、max-height プロパティで遷移を行う必要があります。しかし、それには結果があります。max-height が 0 からその高い値に移行するときの遅延を取り除くには、移行時間を調整する必要があります。

max-height の最大値が増加すると、逆方向への移行が遅れます

于 2013-10-07T17:07:52.977 に答える
0

  1. トランジションが影響しないため、display: none;から削除します。.sidebar_content

  2. に設定するとトランジションが無効になるheight: 0ため、要素を非表示にするために使用します。display: none

  3. 最終位置に達していないの部分を非表示にするには、 に設定.sidebar_wrapperします。overflow: hidden.sidebar_content

CSS

.sidebar_wrapper { width: 150px;  }
.sidebar_header { width: 150px; background-color: #F18986; overflow: hidden; }
.sidebar_content { height: 0; width: 150px; background-color: #444; margin-left: -150px;
transition: all 1s linear; -webkit-transition: all 1s linear; }
.sidebar_header:hover + .sidebar_content { height: auto; margin-left: 0px; }

デモ: http://jsfiddle.net/MLPLs/

于 2013-10-07T17:13:06.337 に答える