CSS3 过渡不适用于显示属性 [重复]

Posted 2023-03-05

【中文标题】CSS3 过渡不适用于显示属性 [重复]

【英文标题】：CSS3 transition doesn't work with display property [duplicate]

【发布时间】：2014-04-01 22:02:18

【问题描述】：

每当我悬停其父元素时，我一直在尝试使用 css 来显示隐藏的 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;

关于我做错了什么的任何线索？当我将鼠标悬停在按钮上时，只是试图获得隐藏内容的平滑效果。提前致谢！

【参考方案1】：

display:none; 从页面中删除一个块，就好像它从未存在过一样。 块不能部分显示；它要么存在，要么不存在。 visibility 也是如此；你不能指望一个块是一半 hidden，根据定义，应该是visible！幸运的是，你可以 使用opacity 代替淡化效果。 - reference

作为替代的 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;

（由于简洁而省略了供应商前缀。）

这里是 working demo。这里还有a similar topic 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>

【讨论】：

@HashemQolami：没有高度反向过渡将不起作用，为了使高度自动，动画 max-height:0 到 max-height:999px，请参阅下面的 Boomstein 答案。

@MohamedHussain 没错。我没有更新那个 senario 的答案，因为 Boomstein 已经提到过它:)

使用 opcity 方法需要确保当 opacity 为 0 时指针事件不存在，否则 ppl 可能会鬼点击它

【参考方案2】：

您不能使用height: 0 和height: auto 来转换高度。 auto 始终是相对的，无法过渡。例如，您可以使用 max-height: 0 并将其转换为 max-height: 9999px。

对不起，我无法发表评论，我的声望不够高......

【参考方案3】：

我在修补的过程中找到了解决方案。

直接想看结果的人：

点击： 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');
  );
)();

请让我知道这个解决方案是否有任何问题，因为我觉得这个解决方案不会限制最大高度。

【讨论】：

真是太好了……看来min-height可以去掉max-height指令了。

【参考方案4】：

我遇到了display:none的问题

我有几个带有过渡效果的水平条，但我只想显示该容器的一部分，并在保持效果的同时折叠其余部分。我转载了一个小demohere

显而易见的是将那些隐藏的动画条包装在一个 div 中，然后切换该元素的高度和不透明度

.hide
  opacity: 0;
  height: 0;

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

动画效果很好，但问题是这些隐藏栏仍然占用我页面上的空间并与其他元素重叠

所以将display:none 添加到隐藏的包装器.hide 解决了边距问题，但不能解决过渡问题，应用display:none 或height:0;opacity:0 都不适用于子元素。

所以我最后的解决方法是给那些隐藏的条一个负的绝对位置，它与 CSS 过渡效果很好。

Jsfiddle

【参考方案5】：

做了一些更改，但我想我使用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 的兄弟，但我没有为此做示例。

【参考方案6】：

最大高度

.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

【参考方案7】：

当您需要切换一个元素，并且您不需要为 margin 属性设置动画时。你可以试试margin-top: -999999em。只是不要全部过渡。