Question

我有一个带有按钮的角度组件，该按钮触发一个sidePanel，并且侧面板在具有该按钮触发侧面面板出来的组件上滑出。我有2个问题可以解决。侧面板上有一个width of 350px;

1）加载带有按钮的组件后，您可以看到sidePanel正在隐藏动画

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类与不拥有类之间切换。补充工具栏的开始位置隐藏在视口（left: -350px）的外部，其可见状态为left: 0。

在侧边栏中设置left和transition属性，然后删除animation属性。

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

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

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

1 个答案: