Записки фронтендера
Наконец-то появилась возможность удобного анимирования появления и исчезновения элементов в CSS, используя дискретные свойства, такие как display. Делается это при помощи свойства transition-behavior со значением allow-discrete и директивы @starting-style.
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<style>
.box {
width: 200px;
height: 100px;
background: coral;
display: block;
opacity: 1;
transition: opacity 1s, display 1s allow-discrete;
}
.box.hidden {
opacity: 0;
display: none;
}
@starting-style {
.box {
opacity: 0;
}
}
</style>
</head>
<body>
<button onclick="document.querySelector('.box').classList.toggle('hidden');">
Переключить
</button>
<div class="box">Элемент с плавным появлением и исчезновением</div>
</body>
</html>
transition-behavior: allow-discrete - откладывает применение display: none до конца перехода. То есть даёт возможность плавного исчезновения. Поддерживается всеми современными браузерами.
@starting-style - указывает стили, которые должны быть уже применены на момент переключения display с none на block. То есть даёт возможность плавного появления. Пока что не поддерживается только в Firefox.
1 · 185 ·