删除 sub-div 不会触发转换

Question

我在 div（child 和 parent）中有一个 div，如果我隐藏 child，那么 parent' s 高度降低 - parent 的大小取决于内容（child 的大小）。

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

我对 "non-triggering transition" 问题很生气，所有问题似乎都有一些共同点：初始值设置不正确，但我认为我的还可以。我说得对吗？

问：当 hiding/removing 来自 parent 的 child 时，如何让过渡正常工作？

#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>

Answer 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>

为简单起见，我删除了所有这些供应商前缀。告诉我这是否是您想要的，以及您是否希望通过过渡完成任何其他操作。

删除 sub-div 不会触发转换

Removing sub-div doesn't trigger transition

css

transition

effect