html - 关键帧动画无法正常工作 - CSS

Question

我有一个带按钮的 Angular 组件，该按钮触发侧面板，侧面板在具有按钮触发侧面板的组件上滑出。我有 2 个问题可以解决。侧面板的宽度为 350px;

1)加载带有按钮的组件时，您可以看到侧面板正在执行隐藏动画

2) slideIn 工作正常但 slideOut 移动得非常快

HTML

<div class="credit-card-container {{toggleSideBarFlag ? 'showSideBar': 'hideSideBar'}} {{ submittingPayment ? 'payment-success-container' : ''}}">
    <app-bulk-pay-credit-card [ccTotalDue]="totalDue" [pickupAvailabilityList]='selectedEquipment' (submittingPayment)="isSubmittingPayment(true)"
      (toggleSideBar)="onToggleSideBar(false)" (close)="onCloseBulkPay(false)"></app-bulk-pay-credit-card>
  </div>

CSS

    .bulk-pay-storage-container {
        .showSideBar {
          width: 100%;
          display: block;
          position: absolute;
          z-index: 9999;
          animation: slideIn 1s;
        }

        .hideSideBar {
          width: 100%;
          display: block;
          position: absolute;
          right: -350px;
          z-index: 9999;
          animation: slideOut 1s forwards;
        }
      }

@keyframes slideIn {
  0% {
    transform: translateX(350px);
  }

  100% {
    transform: translate(0);
  }
}

@keyframes slideOut {
  100% {
    transform: translateX(350px);
  }
}

Answer 1

我会在您的示例中使用transitions 而不是animations。您基本上可以在拥有 showSideBar 类和不拥有它之间切换。侧边栏的起始位置隐藏在视口(viewport)之外 (left: -350px)，其可见状态为 left: 0。

在侧边栏上设置 left 和 transition 属性并删除 animation 属性。

.bulk-pay-storage-container {
  / ... /
  left: -350px;
  transition: left 2s;
}

.bulk-pay-storage-container.showSideBar {
  left: 0
}