Я хочу создать переход для автоматической высоты в контейнере flex-box. У меня есть панель пользователя с именем, точками, статусом и предупреждением.
Предупреждающее сообщение иногда отображается иногда нет. Он использует display: none. Я пытаюсь добиться плавного изменения размера контейнера flex-box с переходом, когда я нажимаю на предупреждающее сообщение.
Вот базовый пример (не работает)
const $user_alert = document.querySelector('user-alert')
$user_alert.onclick = () => {
$user_alert.classList.add('hide')
setTimeout(() => $user_alert.classList.remove('hide'), 1e3)
}body {
display: flex;
width: 100vw;
height: 100vh;
margin: 0;
background-color: aliceblue;
}
user-bar {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
transition: all 2s ease-in-out;
}
user-alert {
cursor: pointer;
color: red;
}
.hide {
display: none;
}<user-bar>
<user-name>Albert Einstein</user-name>
<user-points>10000</user-points>
<user-status>on</user-status>
<user-alert>Time to Party Hard</user-alert>
</user-bar>Я не могу понять, как создать простой переход без определения высоты для каждого элемента внутри пользовательской панели... возможно, это невозможно с помощью display: none.
Любая помощь или идея будут очень признательны!
display: noneв этом компоненте. 14.01.2021display: none14.01.2021