Показать и скрыть с помощью CSS-анимации в компоненте
Я создал боковую панель Angular, которую пытаюсь показать и скрыть с помощью CSS-анимации Онлайн-пример:
Компонент боковой панели полагается на Сервис, чтобы знать, когда скрывать и показывать:
<div id = "sidebar" [ngClass] = "{'hide': sidebarService.hidden, 'show': !sidebarService.hidden}">
<button type = "button" (click) = "sidebarService.toggle()">
Close Sidebar
</button>
<nav>
<ul>
<li>
<a href = "#">Page 3</a>
</li>
<li>
<a href = "#">Page 4</a>
</li>
</ul>
</nav>
</div>
CSS, который я использую, следующий:
@keyframes show {
from {left: -100%;}
to {left: 0;}
}
@keyframes hide {
from {left: 0;}
to {left: -100%;}
}
#sidebar {
background-color: #e0e0e0;
border: 1px solid red;
height: 100%;
overflow-x: hidden;
overflow-y: auto;
position: fixed;
top: 0;
left: -100%;
right: 0;
bottom: 0;
width: 100%;
}
.hide {
animation-name: hide;
animation-duration: 1s;
}
.show {
animation-name: show;
animation-duration: 1s;
}
Я нашел 2 проблемы:
1 — боковая панель сначала отображается видимой, а сразу после этого закрывается;
2 - Когда щелкаешь, чтобы открыть, боковая панель открывается, но когда закончишь, она исчезнет.
Я не уверен, что мне здесь не хватает...
Ответы 3
Используйте css, как показано ниже:
установить left: -100%; в .hide вместо использования в #sidebar
Почему?
если вы установите left: -100%; в #sidebar после того, как анимация show завершит left обратно к объявлению, как в #sidebar, и не останется так, как вы установили в @keyframes
#sidebar {
background-color: #e0e0e0;
border: 1px solid red;
height: 100%;
overflow-x: hidden;
overflow-y: auto;
position: fixed;
top: 0;
right: 0;
bottom: 0;
width: 100%;
}
.hide {
animation-name: hide;
animation-duration: 1s;
left: -100%;
}
.show {
animation-name: show;
animation-duration: 1s;
}
Когда я запускаю свой пример, боковая панель закрывается, пока не нажму кнопку
Извините, но он открыт при запуске ... Кто-нибудь хочет подтвердить?
пожалуйста, посмотрите в F12, какой класс применяется к DOM сначала show/hide, возможно, вам нужно "поиграть" с ngClass
Проблема в том, что вы определяете left: -100% в своем файле css.
Я предлагаю сделать так, поместив left: -100% внутри класса .hide, а не прямо в контейнере.
#sidebar {
background-color: #e0e0e0;
border: 1px solid red;
height: 100%;
overflow-x: hidden;
overflow-y: auto;
position: fixed;
top: 0;
/*left: -100%;*/
right: 0;
bottom: 0;
width: 100%;
}
.hide {
animation-name: hide;
animation-duration: 1s;
left:-100%;
}
.show {
animation-name: show;
animation-duration: 1s;
}
Да, я также пробовал ваше предложение, но при этом боковая панель изначально открывается, когда ее следует закрыть ...
Ах, вы имеете в виду начальное мерцание. Вы можете установить «display: none» в «.hide» и «display: block» в разделе «.show». Это поможет.
Это устраняет начальное мерцание, но когда вы его скрываете, оно просто исчезает без анимации: stackblitz.com/edit/angular-55rey9
Я вижу два варианта: 1. Сделайте то, что предлагает «Милхай Т» ниже, используя переходы и забудьте об анимации. 2 - Определите начальный класс для вашей боковой панели в вашем классе angular, отличном от «скрыть». Как и сегодня, он начинается уже с прикрепленным классом скрытия, который запускает «скрытие» ключевого кадра, что приводит к эффекту мерцания во время начальной загрузки.
Проблема заключается в том, что вы устанавливаете скрытие анимации ключевых кадров, в котором вы устанавливаете from : 0% и to: -100% . Это означает, что анимация начинается с боковой панели в 0.
Таким образом, он идет от -100% (которое вы устанавливаете по умолчанию на #sidebar), переходит к позиции from0%, а затем переходит к позиции to. Вот почему боковая панель появляется при загрузке.
Затем анимация показа снова скрывает боковую панель, потому что вы не установили animation-fill-mode, который должен быть forwards. Если нет, то в конце любой анимации элемент возвращается в положение по умолчанию, которое вы установили на -100% на #sidebar. Значит, снова прячется.
(в этом случае) Вы можете вообще пропустить анимацию и просто использовать переходы
#sidebar {
background-color: #e0e0e0;
border: 1px solid red;
height: 100%;
overflow-x: hidden;
overflow-y: auto;
position: fixed;
top: 0;
left: -100%;
right: 0;
bottom: 0;
width: 100%;
transition: 1s;
}
#sidebar.hide {
left: -100%;
}
#sidebar.show {
left: 0;
}
Я пробовал это, но если вы проверите свой пример, боковая панель изначально будет открыта ... И должна быть закрыта.