Html 滑出侧边栏再次出现
我有一个侧边栏,我正在滑入/滑出。当我按下按钮时,它会向右滑动以隐藏,但在应该隐藏时会再次出现 侧边栏显示在按钮单击上,当您按下x图标时,侧边栏将隐藏 CSSHtml 滑出侧边栏再次出现,html,angular,css,css-animations,Html,Angular,Css,Css Animations,我有一个侧边栏,我正在滑入/滑出。当我按下按钮时,它会向右滑动以隐藏,但在应该隐藏时会再次出现 侧边栏显示在按钮单击上,当您按下x图标时,侧边栏将隐藏 CSS .pay-storage-container { $inner-padding: 16px; height: 100vh; position: fixed; right: 0; top: 0; width: 325px; border: 1px solid #c0c2c7; z-index: 1; //
.pay-storage-container {
$inner-padding: 16px;
height: 100vh;
position: fixed;
right: 0;
top: 0;
width: 325px;
border: 1px solid #c0c2c7;
z-index: 1;
//Other subclasses
}
.showSideBar {
animation: slideIn 1s;
}
.closeSideBar {
animation: slideOut 1s;
}
@keyframes slideIn {
0% {
opacity: 0;
transform: translateX(350px);
}
100% {
opacity: 1;
transform: translate(0);
}
}
@keyframes slideOut {
100% {
opacity: 1;
transform: translateX(350px);
}
}
toggleSideBar = true;
.
.
.
closeSideBar() {
this.toggleSideBar = false;
}
HTML
<div class="pay-storage-container {{toggleSideBar ? 'showSideBar' : 'closeSideBar'}}">
<div class="header-container">
<div class="header">Pay Storage</div>
<span class='close-icon csx-common_delete' (click)="closeSideBar()"></span>
</div>
<div class="pay-storage-inner">
<div *ngIf="paymentMessage$ | async as message">
{{ message | json }}
</div>
<app-equipment-summary [equipmentSummary]='equipmentSummary'></app-equipment-summary>
<app-credit-card #creditCardForm></app-credit-card>
<div>
</div>
</div>
<div class="footer-container">
<button pButton type="button" label="Submit Payment" class="x-primary-green-400" [disabled]='!creditCardForm.creditCardForm.valid'
(click)="onSubmitPayment()"></button>
</div>
</div>
我非常棒,这是css的问题,不是角度方面的问题,但我仍然添加了,以防你们都想看一看您可以添加
动画填充模式:向前编码>到closeSideBar
类。这将确保动画达到100%后不会重置
。付费存储容器{
$inner padding:16px;
高度:100vh;
位置:固定;
右:0;
排名:0;
宽度:325px;
边框:1px实心#c0c2c7;
z指数:1;
//其他子类
}
.showSideBar{
动画:幻灯片1秒;
}
.closeSideBar{
动画:滑出1s;
动画填充模式:正向;
}
@关键帧幻灯片{
0% {
不透明度:0;
转换:translateX(350px);
}
100% {
不透明度:1;
变换:平移(0);
}
}
@关键帧滑出{
100% {
不透明度:1;
转换:translateX(350px);
}
}
付费存储
{{message | json}}
你要杀了它!非常感谢。我知道这很简单