Удаление суб-div не вызывает переход

Question

У меня есть 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>

Answer 1

Как уже отмечался в комментариях, display:none; и transition s или animation s не работают вместе, потому что 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>

Я удалил все эти поставщика префиксы для простоты. Скажите мне, если это то, что вы хотите, и если вы хотите что-то еще сделать с переходами.