html - slideOut 侧边栏再次出现
问题描述
我有一个侧边栏,我正在滑入/滑出。当我按下按钮滑出时,它会向右滑动以隐藏,但在应该隐藏时再次出现。
侧边栏出现在按钮单击时,当您按下 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;
//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);
}
}
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>
我在这个项目中使用了角度,并且我在 .TS 文件中有一个变量,可以切换类以更改滑入/滑出。
TS
toggleSideBar = true;
.
.
.
closeSideBar() {
this.toggleSideBar = false;
}
我非常棒,这是css的问题而不是角度方面的问题,但我仍然补充说,以防你们都想看看
解决方案
您可以添加 animation-fill-mode: forwards;
到closeSideBar
班级。这将确保动画在达到 100% 后不会重置
.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;
animation-fill-mode: forwards;
}
@keyframes slideIn {
0% {
opacity: 0;
transform: translateX(350px);
}
100% {
opacity: 1;
transform: translate(0);
}
}
@keyframes slideOut {
100% {
opacity: 1;
transform: translateX(350px);
}
}
<div class="pay-storage-container 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>
推荐阅读
- node.js - 类似操作数的 mssql 无法正确运行 node.js 和 express
- android - 为什么我的容器尺寸大于导致 SingleChildScrollView() 在键盘按下时滚动的屏幕尺寸?
- css - css变量可以在不同的选择器之间使用吗?
- reactjs - _reactNativeGeocoding.default.setApiKey 不是函数
- swift - 类型 '()' 不能符合 'View';只有 struct/enum/class 类型可以符合使用 swift ui 调用调用函数的协议
- django - NoReverseMatch at / in django3
- java - java.security.NoSuchAlgorithmException:在 Java 8 中找不到任何支持 AES/CBC/PKCS5Padding 的提供程序
- linux - 可执行 ELF 中的 PT_INTERP 段顺序
- c - 在计算浮点数组的大小时,它在 C 中打印大小为 2 而不是 41
- python-3.x - 插槽右键单击菜单操作不起作用