Как анимировать открытие и закрытие боковой панели CSS в CSS?
У меня есть боковая панель, созданная с помощью css display: flex;, и кнопка, которая устанавливает отображение боковой панели на display: none;. В настоящее время боковая панель закрывается и открывается мгновенно, без анимации. Я бы хотел, чтобы боковая панель выдвигалась слева с помощью transition: 2.2s cubic-bezier(.36,-0.01,0,.77);. Боковая панель скрывает и показывает, я просто хочу, чтобы она анимировалась.
Я попытался просто добавить transition: 2.2s cubic-bezier(.36,-0.01,0,.77); в CSS боковой панели, но это не сработало. Вот код для боковой панели контента и js.
function toggleSidebar() {
var sidebar = document.querySelector('sidebar');
var display = sidebar.style.display;
if (display == 'none') {
sidebar.style.display = 'flex';
} else {
sidebar.style.display = 'none';
}
}body {
display: flex;
flex-direction: row;
background-image: url("https://4kwallpapers.com/images/wallpapers/macos-13-macos-ventura-macos-2022-stock-light-5k-retina-2048x1536-8135.jpg");
background-size: cover !important;
margin: 0px;
height: 100%;
}
sidebar {
flex: 0 0 200px;
flex-direction: column;
backdrop-filter: blur(30px) saturate(2);
-webkit-backdrop-filter: blur(30px) saturate(2);
padding-inline: 0;
padding-block: 13px;
overflow-y: auto;
overflow-x: hidden;
transition: 2.2s cubic-bezier(.36,-0.01,0,.77);
height: 100%;
}
.main {
flex: 1 1 auto;
flex-wrap: wrap;
flex-direction: column;
overflow: auto;
}<body>
<sidebar>
<li><a href = "#">Demo</a></li>
</sidebar>
<div class = "main">
<button onclick = "toggleSidebar()">SIDEBAR</button>
</div>
</body>Моя плохая, неправильная функция. Спасибо @Shou.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Оберните боковую панель и основной контент гибким блоком.
Измените flex боковой и основной панели, чтобы показать/скрыть боковую панель.
Кстати, в html нет тега боковой панели, вместо него можно использовать <aside>.
const container = document.querySelector('.container')
const toggleSidebar = () => container.classList.toggle('active').container {
display: flex;
}
aside {
flex: 0;
flex-direction: column;
backdrop-filter: blur(30px) saturate(2);
-webkit-backdrop-filter: blur(30px) saturate(2);
padding-inline: 0;
padding-block: 13px;
overflow-y: auto;
overflow-x: hidden;
height: 100dvh;
background: gray;
transition: 2.2s cubic-bezier(.36, -0.01, 0, .77);
}
.main {
flex: 1;
flex-wrap: wrap;
flex-direction: column;
overflow: auto;
transition: 2.2s cubic-bezier(.36, -0.01, 0, .77);
}
.container.active aside {
flex: 0.4;
}
.container.active .main {
flex: 0.6;
}<div class = "container">
<aside>
<li><a href = "#">Demo</a></li>
</aside>
<div class = "main">
<button onclick = "toggleSidebar()">sidebar</button>
</div>
</div>Это оставляет большой пробел там, где раньше была боковая панель. Основной размер не меняется.
Будет ли боковая панель закрывать основной контент, когда она активна?
нет, он оттолкнет основной в сторону
Это будет немного по-другому, я отредактировал свой ответ.
В зависимости от того, хотите ли вы, чтобы боковая панель скользила или увеличивалась, я вижу два варианта.
В любом случае вам просто нужно переключить класс, чтобы изменить свойство, после чего произойдет переход для этого свойства.
Я также заменил тег <sidebar> на обычный div, так как это технически недействительный HTML. Подробнее см. здесь: Почему CSS работает с поддельными элементами?
Сдвиньте влево/вправо.
Установите margin-left на отрицательную ширину.
Имейте в виду, что могут быть некоторые непредвиденные последствия, так как он будет переполнять flexbox.
function toggleSidebar() {
document.querySelector('.sidebar')
.classList.toggle('closed');
}body {
display: flex;
flex-direction: row;
background-image: url("https://4kwallpapers.com/images/wallpapers/macos-13-macos-ventura-macos-2022-stock-light-5k-retina-2048x1536-8135.jpg");
background-size: cover !important;
margin: 0px;
height: 100%;
}
.sidebar {
flex: 0 0 200px;
flex-direction: column;
backdrop-filter: blur(30px) saturate(2);
-webkit-backdrop-filter: blur(30px) saturate(2);
padding-inline: 0;
padding-block: 13px;
overflow-y: auto;
overflow-x: hidden;
transition: 2.2s cubic-bezier(.36,-0.01,0,.77);
height: 100%;
}
.sidebar.closed {
margin-left: -200px;
}
.main {
flex: 1 1 auto;
flex-wrap: wrap;
flex-direction: column;
overflow: auto;
}<body>
<div class = "sidebar">
<li><a href = "#">Demo</a></li>
</div>
<div class = "main">
<button onclick = "toggleSidebar()">SIDEBAR</button>
</div>
</body>Расти / Уменьшиться
Установите flex-basis на 0.
Изначально вы устанавливаете flex-basis в 200px с помощью сокращенного свойства flex. Это то, что определяет ширину боковой панели.
Я также добавил white-space: nowrap, чтобы избежать переноса текста во время анимации. Если это неприемлемо, вам может понадобиться более сложное решение, чтобы предотвратить закручивание пуль.
function toggleSidebar() {
document.querySelector('.sidebar')
.classList.toggle('closed');
}body {
display: flex;
flex-direction: row;
background-image: url("https://4kwallpapers.com/images/wallpapers/macos-13-macos-ventura-macos-2022-stock-light-5k-retina-2048x1536-8135.jpg");
background-size: cover !important;
margin: 0px;
height: 100%;
}
.sidebar {
flex: 0 0 200px;
flex-direction: column;
backdrop-filter: blur(30px) saturate(2);
-webkit-backdrop-filter: blur(30px) saturate(2);
padding-inline: 0;
padding-block: 13px;
overflow-y: auto;
overflow-x: hidden;
transition: 2.2s cubic-bezier(.36,-0.01,0,.77);
height: 100%;
white-space: nowrap;
}
.sidebar.closed {
flex-basis: 0;
}
.main {
flex: 1 1 auto;
flex-wrap: wrap;
flex-direction: column;
overflow: auto;
}<body>
<div class = "sidebar">
<li><a href = "#">Demo</a></li>
</div>
<div class = "main">
<button onclick = "toggleSidebar()">SIDEBAR</button>
</div>
</body>
Кажется, js не относится к боковой панели.