web-dev-qa-db-ja.com

CSS3トランジションは表示プロパティでは機能しません

私はcssを使用して、親要素をホバーするたびにHidden Divフェードインを表示しようとしています。

これまでのところ、隠しdivを表示することしかできませんでしたが、これまでのように簡単に移行できるものはありません。

ここにJSfiddle上の私のコードがあります http://jsfiddle.net/9dsGP/

ここに私のコードがあります：

HTML：

<div id="header">
<div id="button">This is a Button
    <div class="content">
    This is the Hidden Div
    </div>
</div>
</div>

CSS：

#header #button {width:200px; background:#eee}

#header #button:hover > .content {display:block; opacity:1;}

#header #button .content:hover { display:block;}

#header #button .content {

-webkit-transition: all .3s ease .15s;
-moz-transition: all .3s ease .15s;
-o-transition: all .3s ease .15s;
-ms-transition: all .3s ease .15s;
transition: all .3s ease .15s;

    opacity:0;
    clear: both;
    display: none;

    top: -1px;
    left:-160px;
    padding: 8px;
    min-height: 150px;
    border-top: 1px solid #EEEEEE;
    border-left: 1px solid #EEEEEE;
    border-right: 1px solid #EEEEEE;
    border-bottom: 1px solid #EEEEEE;
    -webkit-border-radius: 0px 7px 7px 7px;
    -moz-border-radius: 0px 7px 7px 7px;
    -khtml-border-radius: 0px 7px 7px 7px;
    border-radius: 0px 7px 7px 7px;
    -webkit-box-shadow: 0px 2px 2px #DDDDDD;
    -moz-box-shadow: 0px 2px 2px #DDDDDD;
    box-shadow: 0px 2px 2px #DDDDDD;
    background: #FFF;
}

私が間違っていることについての手がかりはありますか？ボタンの上にカーソルを置いたときに、非表示のコンテンツにスムーズな効果を与えようとしています。前もって感謝します！

htmlcsscss3css-transitions
35
JCBiggar

display:none;は、ブロックが存在しないかのようにページからブロックを削除します。ブロックを部分的に表示することはできません。そこにあるか、ないかのどちらかです。 visibilityについても同様です。ブロックの半分がhiddenであるとは期待できません。これは、定義によりvisibleになります！幸いなことに、代わりにフェード効果にopacityを使用できます。
- 参照

代替CSSソリューションとして、opacity、height、およびpaddingプロパティを使用して、望ましい効果を実現できます。

#header #button:hover > .content {
    opacity:1;
    height: 150px;
    padding: 8px;    
}

#header #button .content {
    opacity:0;
    height: 0;
    padding: 0 8px;
    overflow: hidden;
    transition: all .3s ease .15s;
}

（簡潔にするため、ベンダーのプレフィックスは省略されています。）

ここにワーキングデモがあります。また、こちらは 同様のトピック SOです。

#header #button {
  width:200px;
  background:#ddd;
  transition: border-radius .3s ease .15s;
}

#header #button:hover, #header #button > .content {
    border-radius: 0px 0px 7px 7px;
}

#header #button:hover > .content {
  opacity: 1;
  height: 150px;
  padding: 8px;    
}

#header #button > .content {
  opacity:0;
  clear: both;
  height: 0;
  padding: 0 8px;
  overflow: hidden;

  -webkit-transition: all .3s ease .15s;
  -moz-transition: all .3s ease .15s;
  -o-transition: all .3s ease .15s;
  -ms-transition: all .3s ease .15s;
  transition: all .3s ease .15s;

  border: 1px solid #ddd;

  -webkit-box-shadow: 0px 2px 2px #ddd;
  -moz-box-shadow: 0px 2px 2px #ddd;
  box-shadow: 0px 2px 2px #ddd;
  background: #FFF;
}

#button > span { display: inline-block; padding: .5em 1em }
<div id="header">
  <div id="button"> <span>This is a Button</span>
    <div class="content">
      This is the Hidden Div
    </div>
  </div>
</div>
92
Hashem Qolami

height: 0およびheight: autoを使用して高さを移行することはできません。 autoは常に相対的であり、移行できません。ただし、たとえばmax-height: 0を使用し、それをmax-height: 9999pxに移行できます。

申し訳ありませんが、コメントできませんでした。担当者が十分に高くありません...

13
Boomstein

いじくり回しながら解決策を見つけました。

結果を直接見たい人：

クリックで：https://jsfiddle.net/dt52jazg/

ホバーあり：https://jsfiddle.net/7gkufLsh/1/

コードは次のとおりです。

HTML

<ul class="list">
  <li>Hey</li>
  <li>This</li>
  <li>is</li>
  <li>just</li>
  <li>a</li>
  <li>test</li>
</ul>

<button class="click-me">
  Click me
</button>

CSS

.list li {
  min-height: 0;
  max-height: 0;
  opacity: 0;
  -webkit-transition: all .3s ease-in-out;
  transition: all .3s ease-in-out;
}

.active li {
  min-height: 20px;
  opacity: 1;
}

JS

(function() {
  $('.click-me').on('click', function() {
    $('.list').toggleClass('active');
  });
})();

このソリューションに問題があるかどうかを教えてください。このソリューションには最大高さの制限はないと思います。

2
rash.tay

いくつかの変更を行いましたが、visibilityを使用してあなたが望む効果を得たと思います。 http://jsfiddle.net/9dsGP/49/

私もこれらの変更を加えました：

position: absolute; /* so it doesn't expand the button background */
top: calc(1em + 8px); /* so it's under the "button" */
left:8px; /* so it's shifted by padding-left */
width: 182px; /* so it fits nicely under the button, width - padding-left - padding-right - border-left-width - border-right-width, 200 - 8 - 8 - 1 - 1 = 182 */

または、.contentを.buttonの兄弟として置くこともできますが、この例は作成しませんでした。

0
Jayen

最大高さ

.PrimaryNav-container {
...
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease;
...
}

.PrimaryNav.PrimaryNav--isOpen .PrimaryNav-container {
max-height: 300px;
}

https://www.codehive.io/boards/bUoLvRg

0
Fatih Hayrioğlu

display:noneの問題に直面しました

トランジション効果のある複数の水平バーがありますが、そのコンテナの一部のみを表示し、効果を維持しながら残りを折りたたみました。小さなデモを再現しました here

明らかなことは、これらの非表示のアニメーションバーをdivでラップし、その要素の高さと不透明度を切り替えることです。

.hide{
  opacity: 0;
  height: 0;
}
.bars-wrapper.expanded > .hide{
 opacity: 1;
 height: auto;
}

アニメーションはうまく機能しますが、問題は、これらの隠されたバーがまだページ上のスペースを消費し、他の要素と重なっていることでした

enter image description here

したがって、display:noneを非表示のラッパー.hideに追加すると、マージンの問題は解決されますが、トランジションは解決されず、display:noneまたはheight:0;opacity:0の適用も子要素に適用されません。

したがって、私の最終的な回避策は、それらの隠されたバーに負の絶対位置を与えることであり、CSSトランジションでうまく機能しました。

Jsfiddle

0
Raja Khoury