删除 sub-div 不会触发转换答案

【问题标题】：Removing sub-div doesn't trigger transition删除 sub-div 不会触发转换
【发布时间】：2015-03-28 19:41:52
【问题描述】：

我在 div 中有一个 div（子项和父项），如果我隐藏子项，则父项的高度会降低 - 父项的大小取决于内容（子项的大小）。

我想要实现的是当父母的高度降低时有一个过渡效果，但问题是没有触发过渡。

我对“非触发转换”问题感到不满，所有问题似乎都有一些共同点：初始值设置不正确，但我认为我的还可以。我说的对吗？

问：从父级隐藏/移除子级时如何使转换工作？

#sub {
    width: 200px;
    height: 100px;
    background: blue;
}
.main:hover #sub {
    display: none;
}
.main {
    height: auto;
    min-height: 50px;
    max-height: 800px;
    width: 300px;
    background: red;
    color: white;

    -webkit-transition: min-height 500ms linear;
    -moz-transition: min-height 500ms linear;
    -ms-transition: min-height 500ms linear;
    -o-transition: min-height 500ms linear;
    transition: min-height 500ms linear;

    -webkit-transition: max-height 500ms linear;
    -moz-transition: max-height 500ms linear;
    -ms-transition: max-height 500ms linear;
    -o-transition: max-height 500ms linear;
    transition: max-height 500ms linear;

    -webkit-transition: height 500ms linear;
    -moz-transition: height 500ms linear;
    -ms-transition: height 500ms linear;
    -o-transition: height 500ms linear;
    transition: height 500ms linear;
}

<div class="main">
    <p>Hover</p>
    <div id="sub"></div>
</div>

【问题讨论】：

问题是display:none;和transitions不能一起工作。
那很糟糕..你知道任何解决方法吗？

标签： css transition effect

【解决方案1】：

正如评论中提到的，display:none; 和 transitions 或 animations 不能一起使用，因为 display 不是一个动画属性。在这种情况下，CSS 基本上会忽略过渡。

至于解决方法问题：您必须明确定义当您希望某物消失或出现时 CSS 的行为方式。它应该淡入/消失吗？它应该失去/增加高度还是宽度？除此之外，您还可以尝试visibility，它是可动画的。

这具有随着孩子慢慢消失而降低父母的效果：

.main {
    height: auto;
    min-height: 50px;
    max-height: 800px;
    width: 300px;
    background: red;
    color: white;
}
#sub {
    width: 200px;
    height: 100px;
    background: blue;
    transition: height 500ms linear;
}
.main:hover #sub {
    height: 0;
}

<div class="main">
    <p>Hover</p>
    <div id="sub"></div>
</div>

为简单起见，我删除了所有这些供应商前缀。告诉我这是否是您想要的，以及您是否想要对过渡进行其他操作。

【讨论】：